﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>日历组件 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>

<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/breadcrumb.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#alerts" class="nav-link font-weight-bold"><span>警告提示框Alerts</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#visible-state" class="nav-link"><span>可见状态</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#v-model-support" class="nav-link"><span>v-model支持</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#contextual-variants" class="nav-link"><span>上下文变体</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#conveying-meaning-to-assistive-technologies" class="nav-link"><span>向辅助技术传达意义</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#additional-content-inside-alerts" class="nav-link"><span>警告提示框中的其他内容</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#color-of-links-within-alerts" class="nav-link"><span>警告提示框中链接的颜色</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#dismissible-alerts" class="nav-link"><span>可忽略的警告提示框</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#auto-dismissing-alerts" class="nav-link"><span>自动关闭警告提示框</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1 active"><a target="_self" href="#fading-alerts" class="nav-link active"><span>褪色警告提示框</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-alert" class="nav-link"><span>&lt;b-alert&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</div>


      <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

        <nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
          <ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active"
                target="_self">首页</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs"
                class="nuxt-link-active" target="_self">中文手册</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea=""
                href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea=""
                aria-current="location">日历组件</span></li>
          </ol>
        </nav>
        <div class="clearfix d-block"></div>
        <h1 class="bd-title" id="content">日历组件(Calendar)</h1>
        <p class="bd-lead">BootstrapVue的自定义 <code translate="no"
            class="notranslate text-nowrap">&lt;b-calendar&gt;</code>
          组件生成一个符合WAI-ARIA的日历样式的日期选择小部件，可以用来控制其他组件，也可以用来创建自定义的日期选择器输入。</p>
        <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>


        <nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
          <header data-v-811345e6="">
            <button data-v-811345e6="" type="button"
              class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed"
              aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page
              table of contents </button>
          </header>
          <ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#v-model-return-value" class=""><span
                  data-v-811345e6="">v-model return value</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabled-and-readonly-states"
                class=""><span data-v-811345e6="">Disabled and readonly states</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#date-constraints" class=""><span
                  data-v-811345e6="">Date constraints</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#minimum-and-maximum-dates"
                    class=""><span data-v-811345e6="">Minimum and maximum dates</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabling-dates" class=""><span
                      data-v-811345e6="">Disabling dates</span></a></li>
              </ul>
            </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#styling" class=""><span
                  data-v-811345e6="">Styling</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#variants" class=""><span
                      data-v-811345e6="">Variants</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#width" class=""><span
                      data-v-811345e6="">Width</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#hiding-the-top-selected-date-header"
                    class=""><span data-v-811345e6="">Hiding the top selected date header</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#border-and-padding" class=""><span
                      data-v-811345e6="">Border and padding</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#default-slot" class=""><span
                      data-v-811345e6="">Default slot</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#adding-css-classes-to-specific-dates"
                    class=""><span data-v-811345e6="">Adding CSS classes to specific dates</span></a></li>
              </ul>
            </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#events" class=""><span
                  data-v-811345e6="">Events</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#input-event" class=""><span
                      data-v-811345e6="">input event</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#selected-event" class=""><span
                      data-v-811345e6="">selected event</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#context-event" class=""><span
                      data-v-811345e6="">context event</span></a></li>
              </ul>
            </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#internationalization" class=""><span
                  data-v-811345e6="">Internationalization</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span
                  data-v-811345e6="">Accessibility</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#implementation-notes" class=""><span
                  data-v-811345e6="">Implementation notes</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#see-also" class=""><span
                  data-v-811345e6="">See also</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span
                  data-v-811345e6="">Component reference</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-calendar" class=""><span
                      data-v-811345e6="">&lt;b-calendar&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components"
                    class=""><span data-v-811345e6="">Importing individual components</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span
                      data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
              </ul>
            </li>
          </ul>
        </nav>
        <p><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code>
          是WAI-ARIA可访问性兼容的，针对键盘控制(箭头、页面向上/向下、home键和结束键)进行了优化。还支持国际化，如果没有指定语言环境，则默认为浏览器或页面的语言环境。</p>
        <p>如果您需要一个日期选择器作为自定义表单控件输入，那么可以使用 <a href="../../../bootstrap-vue/docs/components/form-datepicker"
            class="font-weight-bold"><code translate="no"
              class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code></a> 组件。</p>
        <p><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 是在 BootstrapVue <code
            translate="no" class="notranslate text-nowrap">v2.5.0</code> 中引入的。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar notranslate">
          <div class="row">
            <div class="col-md-auto">
              <div class="b-calendar" style="display: inline-block;">
                <div dir="ltr" lang="en-US" role="group"
                  aria-describedby="__BVID__1120__calendar-value_ __BVID__1120__calendar-grid-help_"
                  class="d-inline-block" style="width: 270px;" id="__BVID__1120">
                  <header class="mb-1">
                    <output role="status" data-selected="" aria-live="polite"
                      class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1120__calendar-value_"
                      for="__BVID__1120__calendar-grid_" aria-atomic="true">No date selected</output>
                  </header>
                  <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                    id="__BVID__1120__calendar-nav_" aria-controls="__BVID__1120__calendar-grid_">
                    <button title="Previous year" type="button" aria-label="Previous year"
                      aria-keyshortcuts="Alt+PageDown"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g>
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(-2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Previous month" type="button" aria-label="Previous month"
                      aria-keyshortcuts="PageDown" class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g>
                              <path fill-rule="evenodd"
                                d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                clip-rule="evenodd"></path>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g>
                              <circle cx="10" cy="10" r="8"></circle>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                              <path fill-rule="evenodd"
                                d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                clip-rule="evenodd"></path>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(-2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                  </div>
                  <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                    class="form-control h-auto text-center p-0 mb-0" id="__BVID__1120__calendar-grid_"
                    aria-labelledby="__BVID__1120__calendar-grid-caption_"
                    aria-describedby="__BVID__1120__calendar-grid-help_"
                    aria-activedescendant="__BVID__1120__cell-2020-02-25_">
                    <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1120__calendar-grid-caption_"
                      aria-live="polite" aria-atomic="true">February 2020</header>
                    <div aria-hidden="true" class="row no-gutters border-bottom"><small title="Sunday"
                        aria-label="Sunday" class="col">Sun</small><small title="Monday" aria-label="Monday"
                        class="col">Mon</small><small title="Tuesday" aria-label="Tuesday" class="col">Tue</small><small
                        title="Wednesday" aria-label="Wednesday" class="col">Wed</small><small title="Thursday"
                        aria-label="Thursday" class="col">Thu</small><small title="Friday" aria-label="Friday"
                        class="col">Fri</small><small title="Saturday" aria-label="Saturday" class="col">Sat</small>
                    </div>
                    <div class="b-calendar-grid-body">
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-01-26" aria-hidden="true"
                          aria-label="Sunday, January 26, 2020" class="col p-0" id="__BVID__1120__cell-2020-01-26_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26</span>
                        </div>
                        <div role="button" data-date="2020-01-27" aria-hidden="true"
                          aria-label="Monday, January 27, 2020" class="col p-0" id="__BVID__1120__cell-2020-01-27_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27</span>
                        </div>
                        <div role="button" data-date="2020-01-28" aria-hidden="true"
                          aria-label="Tuesday, January 28, 2020" class="col p-0" id="__BVID__1120__cell-2020-01-28_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28</span>
                        </div>
                        <div role="button" data-date="2020-01-29" aria-hidden="true"
                          aria-label="Wednesday, January 29, 2020" class="col p-0" id="__BVID__1120__cell-2020-01-29_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29</span>
                        </div>
                        <div role="button" data-date="2020-01-30" aria-hidden="true"
                          aria-label="Thursday, January 30, 2020" class="col p-0" id="__BVID__1120__cell-2020-01-30_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30</span>
                        </div>
                        <div role="button" data-date="2020-01-31" aria-hidden="true"
                          aria-label="Friday, January 31, 2020" class="col p-0" id="__BVID__1120__cell-2020-01-31_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31</span>
                        </div>
                        <div role="button" data-date="2020-02-01" aria-label="Saturday, February 1, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-01_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-02" aria-label="Sunday, February 2, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-02_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2</span>
                        </div>
                        <div role="button" data-date="2020-02-03" aria-label="Monday, February 3, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-03_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3</span>
                        </div>
                        <div role="button" data-date="2020-02-04" aria-label="Tuesday, February 4, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-04_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4</span>
                        </div>
                        <div role="button" data-date="2020-02-05" aria-label="Wednesday, February 5, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-05_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5</span>
                        </div>
                        <div role="button" data-date="2020-02-06" aria-label="Thursday, February 6, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-06_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6</span>
                        </div>
                        <div role="button" data-date="2020-02-07" aria-label="Friday, February 7, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-07_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7</span>
                        </div>
                        <div role="button" data-date="2020-02-08" aria-label="Saturday, February 8, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-08_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-09" aria-label="Sunday, February 9, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-09_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9</span>
                        </div>
                        <div role="button" data-date="2020-02-10" aria-label="Monday, February 10, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-10_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10</span>
                        </div>
                        <div role="button" data-date="2020-02-11" aria-label="Tuesday, February 11, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-11_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11</span>
                        </div>
                        <div role="button" data-date="2020-02-12" aria-label="Wednesday, February 12, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-12_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12</span>
                        </div>
                        <div role="button" data-date="2020-02-13" aria-label="Thursday, February 13, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-13_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13</span>
                        </div>
                        <div role="button" data-date="2020-02-14" aria-label="Friday, February 14, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-14_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14</span>
                        </div>
                        <div role="button" data-date="2020-02-15" aria-label="Saturday, February 15, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-15_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-16" aria-label="Sunday, February 16, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-16_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16</span>
                        </div>
                        <div role="button" data-date="2020-02-17" aria-label="Monday, February 17, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-17_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17</span>
                        </div>
                        <div role="button" data-date="2020-02-18" aria-label="Tuesday, February 18, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-18_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18</span>
                        </div>
                        <div role="button" data-date="2020-02-19" aria-label="Wednesday, February 19, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-19_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19</span>
                        </div>
                        <div role="button" data-date="2020-02-20" aria-label="Thursday, February 20, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-20_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20</span>
                        </div>
                        <div role="button" data-date="2020-02-21" aria-label="Friday, February 21, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-21_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21</span>
                        </div>
                        <div role="button" data-date="2020-02-22" aria-label="Saturday, February 22, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-22_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-23" aria-label="Sunday, February 23, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-23_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23</span>
                        </div>
                        <div role="button" data-date="2020-02-24" aria-label="Monday, February 24, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-24_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24</span>
                        </div>
                        <div role="button" data-date="2020-02-25" aria-label="Tuesday, February 25, 2020 (Today)"
                          class="col p-0" id="__BVID__1120__cell-2020-02-25_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25</span>
                        </div>
                        <div role="button" data-date="2020-02-26" aria-label="Wednesday, February 26, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-26_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26</span>
                        </div>
                        <div role="button" data-date="2020-02-27" aria-label="Thursday, February 27, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-27_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27</span>
                        </div>
                        <div role="button" data-date="2020-02-28" aria-label="Friday, February 28, 2020" class="col p-0"
                          id="__BVID__1120__cell-2020-02-28_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28</span>
                        </div>
                        <div role="button" data-date="2020-02-29" aria-label="Saturday, February 29, 2020"
                          class="col p-0" id="__BVID__1120__cell-2020-02-29_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29</span>
                        </div>
                      </div>
                    </div>
                    <footer class="border-top small text-muted text-center bg-light"
                      id="__BVID__1120__calendar-grid-help_">
                      <div class="small">Use cursor keys to navigate calendar dates</div>
                    </footer>
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <p>Value: <b>''</b></p>
              <p class="mb-0">Context:</p>
              <pre class="small">{
  "selectedYMD": "",
  "selectedDate": null,
  "selectedFormatted": "No date selected",
  "activeYMD": "2020-02-25",
  "activeDate": "2020-02-24T16:00:00.000Z",
  "activeFormatted": "Tuesday, February 25, 2020",
  "disabled": false,
  "locale": "en-US",
  "calendarLocale": "en-US",
  "rtl": false
}</pre>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"auto"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> @<span class="hljs-attr">context</span>=<span class="hljs-string">"onContext"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en-US"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>'{{ value }}'<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>Context:<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>&gt;</span>{{ context }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">context</span>: <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      onContext(ctx) {
        <span class="hljs-keyword">this</span>.context = ctx
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <h2 id="v-model-return-value" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no"
              class="notranslate text-nowrap">v-model</code> 返回值 <a class="anchorjs-link" href="#v-model-return-value"
              aria-labelledby="v-model-return-value"></a></span></h2>
        <p>默认情况下， <code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 以 <code translate="no"
            class="notranslate text-nowrap">YYYY-MM-DD</code> 格式的字符串形式返回日期，该格式与本地浏览器 <code translate="no"
            class="notranslate text-nowrap">&lt;input type="date"&gt;</code> 控件返回的格式相同。您可以让 <code translate="no"
            class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 返回一个 <code translate="no"
            class="notranslate text-nowrap">Date</code> 对象(没有时间部分)作为 <code translate="no"
            class="notranslate text-nowrap">v-model</code> 值，而不是通过设置 <code translate="no"
            class="notranslate text-nowrap">value-as-date</code> 属性</p>
        <p>如果没有选择日期，<code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code>
          将返回一个空字符串 <code translate="no" class="notranslate text-nowrap">''</code>， 如果设置了 <code translate="no"
            class="notranslate text-nowrap">value-as-date</code> 属性，则返回 <code translate="no"
            class="notranslate text-nowrap">null</code> 。</p>
        <p>请注意，当设置了 <code translate="no" class="notranslate text-nowrap">value-as-date</code> 属性时， 返回的 <code
            translate="no" class="notranslate text-nowrap">Date</code> 对象将位于浏览器的默认时区中。</p>
        <h2 id="disabled-and-readonly-states" class="bv-no-focus-ring"><span class="bd-content-title">禁用和只读状态<a
              class="anchorjs-link" href="#disabled-and-readonly-states"
              aria-labelledby="disabled-and-readonly-states"></a></span></h2>
        <p>设置 <code translate="no" class="notranslate text-nowrap">disabled</code> 的属性将删除 <code translate="no"
            class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 组件的所有交互性。
        </p>
        <p>设置 <code translate="no" class="notranslate text-nowrap">readonly</code> 属性将禁用选择日期，但将保持组件的交互性，允许日期导航。<code
            translate="no" class="notranslate text-nowrap">v-model</code> 将不会在只读状态下更新。</p>
        <p>要禁用特定日期或设置最小和最大日期限制，请参阅 <a href="#date-constraints" class="font-weight-bold">Date constraints</a> 章节。</p>
        <div translate="translate"
          class="bd-example vue-example vue-example-b-form-calendar-disabled-readonly notranslate">
          <div>
            <fieldset class="form-group" id="__BVID__1122">
              <legend tabindex="-1" class="bv-no-focus-ring col-form-label pt-0" id="__BVID__1122__BV_label_">Select
                calendar interactive state</legend>
              <div tabindex="-1" role="group" class="bv-no-focus-ring">
                <div role="radiogroup" tabindex="-1" class="bv-no-focus-ring" aria-controls="ex-disabled-readonly"
                  id="__BVID__1123">
                  <div class="custom-control custom-control-inline custom-radio">
                    <input type="radio" autocomplete="off" class="custom-control-input" value="disabled"
                      id="__BVID__1124" name="__BVID__1123">
                    <label class="custom-control-label" for="__BVID__1124">Disabled</label>
                  </div>
                  <div class="custom-control custom-control-inline custom-radio">
                    <input type="radio" autocomplete="off" class="custom-control-input" value="readonly"
                      id="__BVID__1125" name="__BVID__1123">
                    <label class="custom-control-label" for="__BVID__1125">Readonly</label>
                  </div>
                  <div class="custom-control custom-control-inline custom-radio">
                    <input type="radio" autocomplete="off" class="custom-control-input" value="normal" id="__BVID__1126"
                      name="__BVID__1123">
                    <label class="custom-control-label" for="__BVID__1126">Normal</label>
                  </div>
                </div>
              </div>
            </fieldset>
            <div class="b-calendar" style="display: inline-block;">
              <div id="ex-disabled-readonly" dir="ltr" lang="zh-CN" role="group" aria-disabled="true"
                aria-describedby="ex-disabled-readonly__calendar-value_ ex-disabled-readonly__calendar-grid-help_"
                class="d-inline-block" style="width: 270px;">
                <header class="mb-1">
                  <output id="ex-disabled-readonly__calendar-value_" for="ex-disabled-readonly__calendar-grid_"
                    role="status" data-selected="" aria-live="polite"
                    class="d-block text-center rounded border small p-1 mb-1 text-muted readonly" aria-atomic="true">No
                    date selected</output>
                </header>
                <div id="ex-disabled-readonly__calendar-nav_" role="group" aria-hidden="true"
                  aria-label="Calendar navigation" aria-controls="ex-disabled-readonly__calendar-grid_"
                  class="b-calendar-nav d-flex mx-n1 mb-1">
                  <button title="Previous year" type="button" aria-label="Previous year" aria-disabled="true"
                    aria-keyshortcuts="Alt+PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1 disabled">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Previous month" type="button" aria-label="Previous month" aria-disabled="true"
                    aria-keyshortcuts="PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1 disabled">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Current month" type="button" aria-label="Current month" aria-disabled="true"
                    aria-keyshortcuts="Home"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1 disabled">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <circle cx="10" cy="10" r="8"></circle>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next month" type="button" aria-label="Next month" aria-disabled="true"
                    aria-keyshortcuts="PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1 disabled">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next year" type="button" aria-label="Next year" aria-disabled="true"
                    aria-keyshortcuts="Alt+PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1 disabled">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                </div>
                <div id="ex-disabled-readonly__calendar-grid_" role="application" data-month="2020-02"
                  aria-roledescription="Calendar" aria-labelledby="ex-disabled-readonly__calendar-grid-caption_"
                  aria-describedby="ex-disabled-readonly__calendar-grid-help_" aria-disabled="true"
                  aria-activedescendant="ex-disabled-readonly__cell-2020-02-25_"
                  class="form-control h-auto text-center p-0 mb-0">
                  <header id="ex-disabled-readonly__calendar-grid-caption_"
                    class="text-center font-weight-bold p-1 m-0 text-muted" aria-live="polite" aria-atomic="true">
                    2020年2月</header>
                  <div aria-hidden="true" class="row no-gutters border-bottom"><small title="星期日" aria-label="星期日"
                      class="col text-muted">周日</small><small title="星期一" aria-label="星期一"
                      class="col text-muted">周一</small><small title="星期二" aria-label="星期二"
                      class="col text-muted">周二</small><small title="星期三" aria-label="星期三"
                      class="col text-muted">周三</small><small title="星期四" aria-label="星期四"
                      class="col text-muted">周四</small><small title="星期五" aria-label="星期五"
                      class="col text-muted">周五</small><small title="星期六" aria-label="星期六"
                      class="col text-muted">周六</small></div>
                  <div class="b-calendar-grid-body" style="pointer-events: none;">
                    <div class="row no-gutters">
                      <div id="ex-disabled-readonly__cell-2020-01-26_" role="button" data-date="2020-01-26"
                        aria-hidden="true" aria-disabled="true" aria-label="2020年1月26日星期日" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-muted">26日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-01-27_" role="button" data-date="2020-01-27"
                        aria-hidden="true" aria-disabled="true" aria-label="2020年1月27日星期一" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-muted">27日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-01-28_" role="button" data-date="2020-01-28"
                        aria-hidden="true" aria-disabled="true" aria-label="2020年1月28日星期二" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-muted">28日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-01-29_" role="button" data-date="2020-01-29"
                        aria-hidden="true" aria-disabled="true" aria-label="2020年1月29日星期三" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-muted">29日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-01-30_" role="button" data-date="2020-01-30"
                        aria-hidden="true" aria-disabled="true" aria-label="2020年1月30日星期四" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-muted">30日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-01-31_" role="button" data-date="2020-01-31"
                        aria-hidden="true" aria-disabled="true" aria-label="2020年1月31日星期五" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-muted">31日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-01_" role="button" data-date="2020-02-01"
                        aria-disabled="true" aria-label="2020年2月1日星期六" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">1日</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div id="ex-disabled-readonly__cell-2020-02-02_" role="button" data-date="2020-02-02"
                        aria-disabled="true" aria-label="2020年2月2日星期日" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">2日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-03_" role="button" data-date="2020-02-03"
                        aria-disabled="true" aria-label="2020年2月3日星期一" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">3日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-04_" role="button" data-date="2020-02-04"
                        aria-disabled="true" aria-label="2020年2月4日星期二" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">4日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-05_" role="button" data-date="2020-02-05"
                        aria-disabled="true" aria-label="2020年2月5日星期三" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">5日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-06_" role="button" data-date="2020-02-06"
                        aria-disabled="true" aria-label="2020年2月6日星期四" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">6日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-07_" role="button" data-date="2020-02-07"
                        aria-disabled="true" aria-label="2020年2月7日星期五" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">7日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-08_" role="button" data-date="2020-02-08"
                        aria-disabled="true" aria-label="2020年2月8日星期六" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">8日</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div id="ex-disabled-readonly__cell-2020-02-09_" role="button" data-date="2020-02-09"
                        aria-disabled="true" aria-label="2020年2月9日星期日" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">9日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-10_" role="button" data-date="2020-02-10"
                        aria-disabled="true" aria-label="2020年2月10日星期一" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">10日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-11_" role="button" data-date="2020-02-11"
                        aria-disabled="true" aria-label="2020年2月11日星期二" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">11日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-12_" role="button" data-date="2020-02-12"
                        aria-disabled="true" aria-label="2020年2月12日星期三" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">12日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-13_" role="button" data-date="2020-02-13"
                        aria-disabled="true" aria-label="2020年2月13日星期四" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">13日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-14_" role="button" data-date="2020-02-14"
                        aria-disabled="true" aria-label="2020年2月14日星期五" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">14日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-15_" role="button" data-date="2020-02-15"
                        aria-disabled="true" aria-label="2020年2月15日星期六" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">15日</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div id="ex-disabled-readonly__cell-2020-02-16_" role="button" data-date="2020-02-16"
                        aria-disabled="true" aria-label="2020年2月16日星期日" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">16日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-17_" role="button" data-date="2020-02-17"
                        aria-disabled="true" aria-label="2020年2月17日星期一" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">17日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-18_" role="button" data-date="2020-02-18"
                        aria-disabled="true" aria-label="2020年2月18日星期二" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">18日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-19_" role="button" data-date="2020-02-19"
                        aria-disabled="true" aria-label="2020年2月19日星期三" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">19日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-20_" role="button" data-date="2020-02-20"
                        aria-disabled="true" aria-label="2020年2月20日星期四" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">20日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-21_" role="button" data-date="2020-02-21"
                        aria-disabled="true" aria-label="2020年2月21日星期五" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">21日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-22_" role="button" data-date="2020-02-22"
                        aria-disabled="true" aria-label="2020年2月22日星期六" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">22日</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div id="ex-disabled-readonly__cell-2020-02-23_" role="button" data-date="2020-02-23"
                        aria-disabled="true" aria-label="2020年2月23日星期日" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">23日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-24_" role="button" data-date="2020-02-24"
                        aria-disabled="true" aria-label="2020年2月24日星期一" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">24日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-25_" role="button" data-date="2020-02-25"
                        aria-disabled="true" aria-label="2020年2月25日星期二 (Today)" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-primary font-weight-bold">25日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-26_" role="button" data-date="2020-02-26"
                        aria-disabled="true" aria-label="2020年2月26日星期三" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">26日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-27_" role="button" data-date="2020-02-27"
                        aria-disabled="true" aria-label="2020年2月27日星期四" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">27日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-28_" role="button" data-date="2020-02-28"
                        aria-disabled="true" aria-label="2020年2月28日星期五" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">28日</span>
                      </div>
                      <div id="ex-disabled-readonly__cell-2020-02-29_" role="button" data-date="2020-02-29"
                        aria-disabled="true" aria-label="2020年2月29日星期六" class="col p-0"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark font-weight-bold">29日</span>
                      </div>
                    </div>
                  </div>
                  <footer id="ex-disabled-readonly__calendar-grid-help_"
                    class="border-top small text-muted text-center bg-light">
                    <div class="small">Use cursor keys to navigate calendar dates</div>
                  </footer>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-form-group</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"Select calendar interactive state"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"state"</span> <span class="hljs-attr">aria-controls</span>=<span class="hljs-string">"ex-disabled-readonly"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"disabled"</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"readonly"</span>&gt;</span>Readonly<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">b-form-radio</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"normal"</span>&gt;</span>Normal<span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio</span>&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-radio-group</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-form-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ex-disabled-readonly"</span> <span class="hljs-attr">:disabled</span>=<span class="hljs-string">"disabled"</span> <span class="hljs-attr">:readonly</span>=<span class="hljs-string">"readonly"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">state</span>: <span class="hljs-string">'disabled'</span>
      }
    },
    <span class="hljs-attr">computed</span>: {
      disabled() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state === <span class="hljs-string">'disabled'</span>
      },
      readonly() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.state === <span class="hljs-string">'readonly'</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <h2 id="date-constraints" class="bv-no-focus-ring"><span class="bd-content-title">日期限制<a class="anchorjs-link"
              href="#date-constraints" aria-labelledby="date-constraints"></a></span></h2>
        <h3 id="minimum-and-maximum-dates" class="bv-no-focus-ring"><span class="bd-content-title">最小和最大日期<a
              class="anchorjs-link" href="#minimum-and-maximum-dates"
              aria-labelledby="minimum-and-maximum-dates"></a></span></h3>
        <p>通过 <code translate="no" class="notranslate text-nowrap">min</code> 和 <code translate="no"
            class="notranslate text-nowrap">max</code> 属性限制日历范围。 属性接受 <code translate="no"
            class="notranslate text-nowrap">YYYY-MM-DD</code> 格式的日期字符串或 <code translate="no"
            class="notranslate text-nowrap">Date</code> 对象。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-min-max notranslate">
          <div>
            <div class="b-calendar" style="display: inline-block;">
              <div dir="ltr" lang="en" role="group"
                aria-describedby="__BVID__1129__calendar-value_ __BVID__1129__calendar-grid-help_"
                class="d-inline-block" style="width: 270px;" id="__BVID__1129">
                <header class="mb-1">
                  <output role="status" data-selected="" aria-live="polite"
                    class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1129__calendar-value_"
                    for="__BVID__1129__calendar-grid_" aria-atomic="true">No date selected</output>
                </header>
                <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                  id="__BVID__1129__calendar-nav_" aria-controls="__BVID__1129__calendar-grid_">
                  <button title="Previous year" type="button" aria-label="Previous year" aria-disabled="true"
                    aria-keyshortcuts="Alt+PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1 disabled">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Previous month" type="button" aria-label="Previous month" aria-keyshortcuts="PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <circle cx="10" cy="10" r="8"></circle>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next year" type="button" aria-label="Next year" aria-disabled="true"
                    aria-keyshortcuts="Alt+PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1 disabled">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                </div>
                <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                  class="form-control h-auto text-center p-0 mb-0" id="__BVID__1129__calendar-grid_"
                  aria-labelledby="__BVID__1129__calendar-grid-caption_"
                  aria-describedby="__BVID__1129__calendar-grid-help_"
                  aria-activedescendant="__BVID__1129__cell-2020-02-25_">
                  <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1129__calendar-grid-caption_"
                    aria-live="polite" aria-atomic="true">February 2020</header>
                  <div aria-hidden="true" class="row no-gutters border-bottom"><small title="Sunday" aria-label="Sunday"
                      class="col">Sun</small><small title="Monday" aria-label="Monday" class="col">Mon</small><small
                      title="Tuesday" aria-label="Tuesday" class="col">Tue</small><small title="Wednesday"
                      aria-label="Wednesday" class="col">Wed</small><small title="Thursday" aria-label="Thursday"
                      class="col">Thu</small><small title="Friday" aria-label="Friday" class="col">Fri</small><small
                      title="Saturday" aria-label="Saturday" class="col">Sat</small></div>
                  <div class="b-calendar-grid-body">
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-01-26" aria-hidden="true" aria-label="Sunday, January 26, 2020"
                        class="col p-0" id="__BVID__1129__cell-2020-01-26_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26</span></div>
                      <div role="button" data-date="2020-01-27" aria-hidden="true" aria-label="Monday, January 27, 2020"
                        class="col p-0" id="__BVID__1129__cell-2020-01-27_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27</span></div>
                      <div role="button" data-date="2020-01-28" aria-hidden="true"
                        aria-label="Tuesday, January 28, 2020" class="col p-0" id="__BVID__1129__cell-2020-01-28_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28</span></div>
                      <div role="button" data-date="2020-01-29" aria-hidden="true"
                        aria-label="Wednesday, January 29, 2020" class="col p-0" id="__BVID__1129__cell-2020-01-29_">
                        <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29</span>
                      </div>
                      <div role="button" data-date="2020-01-30" aria-hidden="true"
                        aria-label="Thursday, January 30, 2020" class="col p-0" id="__BVID__1129__cell-2020-01-30_">
                        <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30</span>
                      </div>
                      <div role="button" data-date="2020-01-31" aria-hidden="true" aria-label="Friday, January 31, 2020"
                        class="col p-0" id="__BVID__1129__cell-2020-01-31_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31</span></div>
                      <div role="button" data-date="2020-02-01" aria-label="Saturday, February 1, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-01_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-02" aria-label="Sunday, February 2, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-02_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2</span>
                      </div>
                      <div role="button" data-date="2020-02-03" aria-label="Monday, February 3, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-03_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3</span>
                      </div>
                      <div role="button" data-date="2020-02-04" aria-label="Tuesday, February 4, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-04_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4</span>
                      </div>
                      <div role="button" data-date="2020-02-05" aria-label="Wednesday, February 5, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-05_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5</span>
                      </div>
                      <div role="button" data-date="2020-02-06" aria-label="Thursday, February 6, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-06_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6</span>
                      </div>
                      <div role="button" data-date="2020-02-07" aria-label="Friday, February 7, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-07_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7</span>
                      </div>
                      <div role="button" data-date="2020-02-08" aria-label="Saturday, February 8, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-08_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-09" aria-label="Sunday, February 9, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-09_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9</span>
                      </div>
                      <div role="button" data-date="2020-02-10" aria-label="Monday, February 10, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-10_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10</span>
                      </div>
                      <div role="button" data-date="2020-02-11" aria-label="Tuesday, February 11, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-11_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11</span>
                      </div>
                      <div role="button" data-date="2020-02-12" aria-label="Wednesday, February 12, 2020"
                        class="col p-0" id="__BVID__1129__cell-2020-02-12_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12</span>
                      </div>
                      <div role="button" data-date="2020-02-13" aria-label="Thursday, February 13, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-13_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13</span>
                      </div>
                      <div role="button" data-date="2020-02-14" aria-label="Friday, February 14, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-14_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14</span>
                      </div>
                      <div role="button" data-date="2020-02-15" aria-label="Saturday, February 15, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-15_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-16" aria-label="Sunday, February 16, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-16_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16</span>
                      </div>
                      <div role="button" data-date="2020-02-17" aria-label="Monday, February 17, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-17_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17</span>
                      </div>
                      <div role="button" data-date="2020-02-18" aria-label="Tuesday, February 18, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-18_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18</span>
                      </div>
                      <div role="button" data-date="2020-02-19" aria-label="Wednesday, February 19, 2020"
                        class="col p-0" id="__BVID__1129__cell-2020-02-19_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19</span>
                      </div>
                      <div role="button" data-date="2020-02-20" aria-label="Thursday, February 20, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-20_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20</span>
                      </div>
                      <div role="button" data-date="2020-02-21" aria-label="Friday, February 21, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-21_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21</span>
                      </div>
                      <div role="button" data-date="2020-02-22" aria-label="Saturday, February 22, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-22_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-23" aria-label="Sunday, February 23, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-23_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23</span>
                      </div>
                      <div role="button" data-date="2020-02-24" aria-label="Monday, February 24, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-24_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24</span>
                      </div>
                      <div role="button" data-date="2020-02-25" aria-label="Tuesday, February 25, 2020 (Today)"
                        class="col p-0" id="__BVID__1129__cell-2020-02-25_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25</span>
                      </div>
                      <div role="button" data-date="2020-02-26" aria-label="Wednesday, February 26, 2020"
                        class="col p-0" id="__BVID__1129__cell-2020-02-26_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26</span>
                      </div>
                      <div role="button" data-date="2020-02-27" aria-label="Thursday, February 27, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-27_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27</span>
                      </div>
                      <div role="button" data-date="2020-02-28" aria-label="Friday, February 28, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-28_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28</span>
                      </div>
                      <div role="button" data-date="2020-02-29" aria-label="Saturday, February 29, 2020" class="col p-0"
                        id="__BVID__1129__cell-2020-02-29_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29</span>
                      </div>
                    </div>
                  </div>
                  <footer class="border-top small text-muted text-center bg-light"
                    id="__BVID__1129__calendar-grid-help_">
                    <div class="small">Use cursor keys to navigate calendar dates</div>
                  </footer>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">:min</span>=<span class="hljs-string">"min"</span> <span class="hljs-attr">:max</span>=<span class="hljs-string">"max"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
      <span class="hljs-keyword">const</span> today = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(now.getFullYear(), now.getMonth(), now.getDate())
      <span class="hljs-comment">// 15th two months prior</span>
      <span class="hljs-keyword">const</span> minDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(today)
      minDate.setMonth(minDate.getMonth() - <span class="hljs-number">2</span>)
      minDate.setDate(<span class="hljs-number">15</span>)
      <span class="hljs-comment">// 15th in two months</span>
      <span class="hljs-keyword">const</span> maxDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(today)
      maxDate.setMonth(maxDate.getMonth() + <span class="hljs-number">2</span>)
      maxDate.setDate(<span class="hljs-number">15</span>)

      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">min</span>: minDate,
        <span class="hljs-attr">max</span>: maxDate
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <h3 id="disabling-dates" class="bv-no-focus-ring"><span class="bd-content-title">禁用日期<a class="anchorjs-link"
              href="#disabling-dates" aria-labelledby="disabling-dates"></a></span></h3>
        <p>如果需要禁用日历中的特定日期，请指定对 <code translate="no" class="notranslate text-nowrap">date-disabled-fn</code>
          支持的函数引用。函数传递两个参数：</p>
        <ul>
          <li><code translate="no" class="notranslate text-nowrap">ymd</code> 日期为 <code translate="no"
              class="notranslate text-nowrap">YYYY-MM-DD</code> 字符串</li>
          <li><code translate="no" class="notranslate text-nowrap">date</code> 日期为 <code translate="no"
              class="notranslate text-nowrap">Date</code> 对象</li>
        </ul>
        <p>如果 <em>不能</em> 选择日期，函数应该返回 <code translate="no" class="notranslate text-nowrap">true</code> (禁用)；如果
          <em>可以</em> 选择日期，函数应该返回 <code translate="no" class="notranslate text-nowrap">false</code> (启用)。注意，函数
          <strong>不能</strong> 是异步的，应该尽快返回一个值。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-disabled-dates notranslate">
          <div>
            <div class="b-calendar" style="display: inline-block;">
              <div dir="ltr" lang="en" role="group"
                aria-describedby="__BVID__1131__calendar-value_ __BVID__1131__calendar-grid-help_"
                class="d-inline-block" style="width: 270px;" id="__BVID__1131">
                <header class="mb-1">
                  <output role="status" data-selected="" aria-live="polite"
                    class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1131__calendar-value_"
                    for="__BVID__1131__calendar-grid_" aria-atomic="true">No date selected</output>
                </header>
                <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                  id="__BVID__1131__calendar-nav_" aria-controls="__BVID__1131__calendar-grid_">
                  <button title="Previous year" type="button" aria-label="Previous year"
                    aria-keyshortcuts="Alt+PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Previous month" type="button" aria-label="Previous month" aria-keyshortcuts="PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <circle cx="10" cy="10" r="8"></circle>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                </div>
                <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                  class="form-control h-auto text-center p-0 mb-0" id="__BVID__1131__calendar-grid_"
                  aria-labelledby="__BVID__1131__calendar-grid-caption_"
                  aria-describedby="__BVID__1131__calendar-grid-help_"
                  aria-activedescendant="__BVID__1131__cell-2020-02-25_">
                  <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1131__calendar-grid-caption_"
                    aria-live="polite" aria-atomic="true">February 2020</header>
                  <div aria-hidden="true" class="row no-gutters border-bottom"><small title="Sunday" aria-label="Sunday"
                      class="col">Sun</small><small title="Monday" aria-label="Monday" class="col">Mon</small><small
                      title="Tuesday" aria-label="Tuesday" class="col">Tue</small><small title="Wednesday"
                      aria-label="Wednesday" class="col">Wed</small><small title="Thursday" aria-label="Thursday"
                      class="col">Thu</small><small title="Friday" aria-label="Friday" class="col">Fri</small><small
                      title="Saturday" aria-label="Saturday" class="col">Sat</small></div>
                  <div class="b-calendar-grid-body">
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-01-26" aria-hidden="true" aria-disabled="true"
                        aria-label="Sunday, January 26, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-01-26_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-muted">26</span>
                      </div>
                      <div role="button" data-date="2020-01-27" aria-hidden="true" aria-label="Monday, January 27, 2020"
                        class="col p-0" id="__BVID__1131__cell-2020-01-27_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27</span></div>
                      <div role="button" data-date="2020-01-28" aria-hidden="true"
                        aria-label="Tuesday, January 28, 2020" class="col p-0" id="__BVID__1131__cell-2020-01-28_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28</span></div>
                      <div role="button" data-date="2020-01-29" aria-hidden="true"
                        aria-label="Wednesday, January 29, 2020" class="col p-0" id="__BVID__1131__cell-2020-01-29_">
                        <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29</span>
                      </div>
                      <div role="button" data-date="2020-01-30" aria-hidden="true"
                        aria-label="Thursday, January 30, 2020" class="col p-0" id="__BVID__1131__cell-2020-01-30_">
                        <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30</span>
                      </div>
                      <div role="button" data-date="2020-01-31" aria-hidden="true" aria-label="Friday, January 31, 2020"
                        class="col p-0" id="__BVID__1131__cell-2020-01-31_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31</span></div>
                      <div role="button" data-date="2020-02-01" aria-disabled="true"
                        aria-label="Saturday, February 1, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-01_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">1</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-02" aria-disabled="true"
                        aria-label="Sunday, February 2, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-02_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">2</span>
                      </div>
                      <div role="button" data-date="2020-02-03" aria-label="Monday, February 3, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-03_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3</span>
                      </div>
                      <div role="button" data-date="2020-02-04" aria-label="Tuesday, February 4, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-04_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4</span>
                      </div>
                      <div role="button" data-date="2020-02-05" aria-label="Wednesday, February 5, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-05_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5</span>
                      </div>
                      <div role="button" data-date="2020-02-06" aria-label="Thursday, February 6, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-06_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6</span>
                      </div>
                      <div role="button" data-date="2020-02-07" aria-label="Friday, February 7, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-07_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7</span>
                      </div>
                      <div role="button" data-date="2020-02-08" aria-disabled="true"
                        aria-label="Saturday, February 8, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-08_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">8</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-09" aria-disabled="true"
                        aria-label="Sunday, February 9, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-09_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">9</span>
                      </div>
                      <div role="button" data-date="2020-02-10" aria-label="Monday, February 10, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-10_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10</span>
                      </div>
                      <div role="button" data-date="2020-02-11" aria-label="Tuesday, February 11, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-11_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11</span>
                      </div>
                      <div role="button" data-date="2020-02-12" aria-label="Wednesday, February 12, 2020"
                        class="col p-0" id="__BVID__1131__cell-2020-02-12_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12</span>
                      </div>
                      <div role="button" data-date="2020-02-13" aria-disabled="true"
                        aria-label="Thursday, February 13, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-13_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">13</span>
                      </div>
                      <div role="button" data-date="2020-02-14" aria-label="Friday, February 14, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-14_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14</span>
                      </div>
                      <div role="button" data-date="2020-02-15" aria-disabled="true"
                        aria-label="Saturday, February 15, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-15_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">15</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-16" aria-disabled="true"
                        aria-label="Sunday, February 16, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-16_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">16</span>
                      </div>
                      <div role="button" data-date="2020-02-17" aria-label="Monday, February 17, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-17_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17</span>
                      </div>
                      <div role="button" data-date="2020-02-18" aria-label="Tuesday, February 18, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-18_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18</span>
                      </div>
                      <div role="button" data-date="2020-02-19" aria-label="Wednesday, February 19, 2020"
                        class="col p-0" id="__BVID__1131__cell-2020-02-19_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19</span>
                      </div>
                      <div role="button" data-date="2020-02-20" aria-label="Thursday, February 20, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-20_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20</span>
                      </div>
                      <div role="button" data-date="2020-02-21" aria-label="Friday, February 21, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-21_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21</span>
                      </div>
                      <div role="button" data-date="2020-02-22" aria-disabled="true"
                        aria-label="Saturday, February 22, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-22_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">22</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-23" aria-disabled="true"
                        aria-label="Sunday, February 23, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-23_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">23</span>
                      </div>
                      <div role="button" data-date="2020-02-24" aria-label="Monday, February 24, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-24_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24</span>
                      </div>
                      <div role="button" data-date="2020-02-25" aria-label="Tuesday, February 25, 2020 (Today)"
                        class="col p-0" id="__BVID__1131__cell-2020-02-25_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25</span>
                      </div>
                      <div role="button" data-date="2020-02-26" aria-label="Wednesday, February 26, 2020"
                        class="col p-0" id="__BVID__1131__cell-2020-02-26_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26</span>
                      </div>
                      <div role="button" data-date="2020-02-27" aria-label="Thursday, February 27, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-27_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27</span>
                      </div>
                      <div role="button" data-date="2020-02-28" aria-label="Friday, February 28, 2020" class="col p-0"
                        id="__BVID__1131__cell-2020-02-28_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28</span>
                      </div>
                      <div role="button" data-date="2020-02-29" aria-disabled="true"
                        aria-label="Saturday, February 29, 2020" class="col p-0 bg-light"
                        id="__BVID__1131__cell-2020-02-29_"><span
                          class="btn border-0 rounded-circle text-nowrap disabled btn-outline-light text-dark">29</span>
                      </div>
                    </div>
                  </div>
                  <footer class="border-top small text-muted text-center bg-light"
                    id="__BVID__1131__calendar-grid-help_">
                    <div class="small">Use cursor keys to navigate calendar dates</div>
                  </footer>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">:date-disabled-fn</span>=<span class="hljs-string">"dateDisabled"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      dateDisabled(ymd, date) {
        <span class="hljs-comment">// Disable weekends (Sunday = `0`, Saturday = `6`) and</span>
        <span class="hljs-comment">// disable days that fall on the 13th of the month</span>
        <span class="hljs-keyword">const</span> weekday = date.getDay()
        <span class="hljs-keyword">const</span> day = date.getDate()
        <span class="hljs-comment">// Return `true` if the date should be disabled</span>
        <span class="hljs-keyword">return</span> weekday === <span class="hljs-number">0</span> || weekday === <span class="hljs-number">6</span> || day === <span class="hljs-number">13</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <p>注意， <code translate="no" class="notranslate text-nowrap">min</code> 和 <code translate="no"
            class="notranslate text-nowrap">max</code> 日期限制将在 <code translate="no"
            class="notranslate text-nowrap">date-disabled-fn</code>之前被求值。</p>
        <h2 id="styling" class="bv-no-focus-ring"><span class="bd-content-title">样式<a class="anchorjs-link"
              href="#styling" aria-labelledby="styling"></a></span></h2>
        <h3 id="variants" class="bv-no-focus-ring"><span class="bd-content-title">变量<a class="anchorjs-link"
              href="#variants" aria-labelledby="variants"></a></span></h3>
        <p>“选择日期”按钮(背景色)默认为 <code translate="no" class="notranslate text-nowrap">'primary'</code> 主题变量。
          您可以通过选择的变量属性将其更改为任何 Bootstrap v4 主题的颜色： <code translate="no"
            class="notranslate text-nowrap">'secondary'</code>, <code translate="no"
            class="notranslate text-nowrap">'success'</code>, <code translate="no"
            class="notranslate text-nowrap">'danger'</code>, <code translate="no"
            class="notranslate text-nowrap">'warning'</code>, <code translate="no"
            class="notranslate text-nowrap">'info'</code> 等等 <code translate="no"
            class="notranslate text-nowrap">selected-variant</code> 属性。</p>
        <p>今天的日期也将被高亮显示（文本颜色），使用与默认选择的日期相同的变量。要为今天的日期指定不同的主题颜色，请使用 <code translate="no"
            class="notranslate text-nowrap">today-variant</code> 属性。</p>
        <p>要完全禁用高亮显示今天的日期，请设置 <code translate="no" class="notranslate text-nowrap">no-highlight-today</code> 属性。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-variants notranslate">
          <div class="b-calendar" style="display: inline-block;">
            <div dir="ltr" lang="zh-CN" role="group"
              aria-describedby="__BVID__1133__calendar-value_ __BVID__1133__calendar-grid-help_" class="d-inline-block"
              style="width: 270px;" id="__BVID__1133">
              <header class="mb-1">
                <output role="status" data-selected="" aria-live="polite"
                  class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1133__calendar-value_"
                  for="__BVID__1133__calendar-grid_" aria-atomic="true">No date selected</output>
              </header>
              <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                id="__BVID__1133__calendar-nav_" aria-controls="__BVID__1133__calendar-grid_">
                <button title="Previous year" type="button" aria-label="Previous year" aria-keyshortcuts="Alt+PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Previous month" type="button" aria-label="Previous month" aria-keyshortcuts="PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <circle cx="10" cy="10" r="8"></circle>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
              </div>
              <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                class="form-control h-auto text-center p-0 mb-0" id="__BVID__1133__calendar-grid_"
                aria-labelledby="__BVID__1133__calendar-grid-caption_"
                aria-describedby="__BVID__1133__calendar-grid-help_"
                aria-activedescendant="__BVID__1133__cell-2020-02-25_">
                <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1133__calendar-grid-caption_"
                  aria-live="polite" aria-atomic="true">2020年2月</header>
                <div aria-hidden="true" class="row no-gutters border-bottom"><small title="星期日" aria-label="星期日"
                    class="col">周日</small><small title="星期一" aria-label="星期一" class="col">周一</small><small title="星期二"
                    aria-label="星期二" class="col">周二</small><small title="星期三" aria-label="星期三"
                    class="col">周三</small><small title="星期四" aria-label="星期四" class="col">周四</small><small title="星期五"
                    aria-label="星期五" class="col">周五</small><small title="星期六" aria-label="星期六" class="col">周六</small>
                </div>
                <div class="b-calendar-grid-body">
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-01-26" aria-hidden="true" aria-label="2020年1月26日星期日"
                      class="col p-0" id="__BVID__1133__cell-2020-01-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26日</span></div>
                    <div role="button" data-date="2020-01-27" aria-hidden="true" aria-label="2020年1月27日星期一"
                      class="col p-0" id="__BVID__1133__cell-2020-01-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27日</span></div>
                    <div role="button" data-date="2020-01-28" aria-hidden="true" aria-label="2020年1月28日星期二"
                      class="col p-0" id="__BVID__1133__cell-2020-01-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28日</span></div>
                    <div role="button" data-date="2020-01-29" aria-hidden="true" aria-label="2020年1月29日星期三"
                      class="col p-0" id="__BVID__1133__cell-2020-01-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29日</span></div>
                    <div role="button" data-date="2020-01-30" aria-hidden="true" aria-label="2020年1月30日星期四"
                      class="col p-0" id="__BVID__1133__cell-2020-01-30_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30日</span></div>
                    <div role="button" data-date="2020-01-31" aria-hidden="true" aria-label="2020年1月31日星期五"
                      class="col p-0" id="__BVID__1133__cell-2020-01-31_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31日</span></div>
                    <div role="button" data-date="2020-02-01" aria-label="2020年2月1日星期六" class="col p-0"
                      id="__BVID__1133__cell-2020-02-01_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-02" aria-label="2020年2月2日星期日" class="col p-0"
                      id="__BVID__1133__cell-2020-02-02_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2日</span>
                    </div>
                    <div role="button" data-date="2020-02-03" aria-label="2020年2月3日星期一" class="col p-0"
                      id="__BVID__1133__cell-2020-02-03_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3日</span>
                    </div>
                    <div role="button" data-date="2020-02-04" aria-label="2020年2月4日星期二" class="col p-0"
                      id="__BVID__1133__cell-2020-02-04_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4日</span>
                    </div>
                    <div role="button" data-date="2020-02-05" aria-label="2020年2月5日星期三" class="col p-0"
                      id="__BVID__1133__cell-2020-02-05_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5日</span>
                    </div>
                    <div role="button" data-date="2020-02-06" aria-label="2020年2月6日星期四" class="col p-0"
                      id="__BVID__1133__cell-2020-02-06_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6日</span>
                    </div>
                    <div role="button" data-date="2020-02-07" aria-label="2020年2月7日星期五" class="col p-0"
                      id="__BVID__1133__cell-2020-02-07_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7日</span>
                    </div>
                    <div role="button" data-date="2020-02-08" aria-label="2020年2月8日星期六" class="col p-0"
                      id="__BVID__1133__cell-2020-02-08_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-09" aria-label="2020年2月9日星期日" class="col p-0"
                      id="__BVID__1133__cell-2020-02-09_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9日</span>
                    </div>
                    <div role="button" data-date="2020-02-10" aria-label="2020年2月10日星期一" class="col p-0"
                      id="__BVID__1133__cell-2020-02-10_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10日</span>
                    </div>
                    <div role="button" data-date="2020-02-11" aria-label="2020年2月11日星期二" class="col p-0"
                      id="__BVID__1133__cell-2020-02-11_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11日</span>
                    </div>
                    <div role="button" data-date="2020-02-12" aria-label="2020年2月12日星期三" class="col p-0"
                      id="__BVID__1133__cell-2020-02-12_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12日</span>
                    </div>
                    <div role="button" data-date="2020-02-13" aria-label="2020年2月13日星期四" class="col p-0"
                      id="__BVID__1133__cell-2020-02-13_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13日</span>
                    </div>
                    <div role="button" data-date="2020-02-14" aria-label="2020年2月14日星期五" class="col p-0"
                      id="__BVID__1133__cell-2020-02-14_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14日</span>
                    </div>
                    <div role="button" data-date="2020-02-15" aria-label="2020年2月15日星期六" class="col p-0"
                      id="__BVID__1133__cell-2020-02-15_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-16" aria-label="2020年2月16日星期日" class="col p-0"
                      id="__BVID__1133__cell-2020-02-16_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16日</span>
                    </div>
                    <div role="button" data-date="2020-02-17" aria-label="2020年2月17日星期一" class="col p-0"
                      id="__BVID__1133__cell-2020-02-17_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17日</span>
                    </div>
                    <div role="button" data-date="2020-02-18" aria-label="2020年2月18日星期二" class="col p-0"
                      id="__BVID__1133__cell-2020-02-18_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18日</span>
                    </div>
                    <div role="button" data-date="2020-02-19" aria-label="2020年2月19日星期三" class="col p-0"
                      id="__BVID__1133__cell-2020-02-19_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19日</span>
                    </div>
                    <div role="button" data-date="2020-02-20" aria-label="2020年2月20日星期四" class="col p-0"
                      id="__BVID__1133__cell-2020-02-20_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20日</span>
                    </div>
                    <div role="button" data-date="2020-02-21" aria-label="2020年2月21日星期五" class="col p-0"
                      id="__BVID__1133__cell-2020-02-21_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21日</span>
                    </div>
                    <div role="button" data-date="2020-02-22" aria-label="2020年2月22日星期六" class="col p-0"
                      id="__BVID__1133__cell-2020-02-22_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-23" aria-label="2020年2月23日星期日" class="col p-0"
                      id="__BVID__1133__cell-2020-02-23_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23日</span>
                    </div>
                    <div role="button" data-date="2020-02-24" aria-label="2020年2月24日星期一" class="col p-0"
                      id="__BVID__1133__cell-2020-02-24_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24日</span>
                    </div>
                    <div role="button" data-date="2020-02-25" aria-label="2020年2月25日星期二 (Today)" class="col p-0"
                      id="__BVID__1133__cell-2020-02-25_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-info font-weight-bold">25日</span>
                    </div>
                    <div role="button" data-date="2020-02-26" aria-label="2020年2月26日星期三" class="col p-0"
                      id="__BVID__1133__cell-2020-02-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26日</span>
                    </div>
                    <div role="button" data-date="2020-02-27" aria-label="2020年2月27日星期四" class="col p-0"
                      id="__BVID__1133__cell-2020-02-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27日</span>
                    </div>
                    <div role="button" data-date="2020-02-28" aria-label="2020年2月28日星期五" class="col p-0"
                      id="__BVID__1133__cell-2020-02-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28日</span>
                    </div>
                    <div role="button" data-date="2020-02-29" aria-label="2020年2月29日星期六" class="col p-0"
                      id="__BVID__1133__cell-2020-02-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29日</span>
                    </div>
                  </div>
                </div>
                <footer class="border-top small text-muted text-center bg-light" id="__BVID__1133__calendar-grid-help_">
                  <div class="small">Use cursor keys to navigate calendar dates</div>
                </footer>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">selected-variant</span>=<span class="hljs-string">"success"</span> <span class="hljs-attr">today-variant</span>=<span class="hljs-string">"info"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
        <h3 id="width" class="bv-no-focus-ring"><span class="bd-content-title">宽度<a class="anchorjs-link" href="#width"
              aria-labelledby="width"></a></span></h3>
        <p> <code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 渲染为一个默认宽度为 <code
            translate="no" class="notranslate text-nowrap">270px</code>
          的内联块元素(不包括可能添加到其中的任何填充或边框)。此宽度经过优化，以适应较小的移动设备的宽度。</p>
        <p>要更改宽度，请将 <code translate="no" class="notranslate text-nowrap">width</code> 属性设置为任何有效的CSS宽度(包括单位)。</p>
        <p>可选地，通过设置 <code translate="no" class="notranslate text-nowrap">block</code>属性使日历全宽，这将使其展开以适应父元素的宽度。 设置 <code
            translate="no" class="notranslate text-nowrap">block</code> 时，<code translate="no"
            class="notranslate text-nowrap">width</code>
          属性没有效果。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-block notranslate">
          <div class="b-calendar" local="en-US">
            <div dir="ltr" lang="zh-CN" role="group"
              aria-describedby="__BVID__1135__calendar-value_ __BVID__1135__calendar-grid-help_" class="d-block"
              id="__BVID__1135">
              <header class="mb-1">
                <output role="status" data-selected="" aria-live="polite"
                  class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1135__calendar-value_"
                  for="__BVID__1135__calendar-grid_" aria-atomic="true">No date selected</output>
              </header>
              <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                id="__BVID__1135__calendar-nav_" aria-controls="__BVID__1135__calendar-grid_">
                <button title="Previous year" type="button" aria-label="Previous year" aria-keyshortcuts="Alt+PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Previous month" type="button" aria-label="Previous month" aria-keyshortcuts="PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <circle cx="10" cy="10" r="8"></circle>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
              </div>
              <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                class="form-control h-auto text-center p-0 mb-0" id="__BVID__1135__calendar-grid_"
                aria-labelledby="__BVID__1135__calendar-grid-caption_"
                aria-describedby="__BVID__1135__calendar-grid-help_"
                aria-activedescendant="__BVID__1135__cell-2020-02-25_">
                <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1135__calendar-grid-caption_"
                  aria-live="polite" aria-atomic="true">2020年2月</header>
                <div aria-hidden="true" class="row no-gutters border-bottom"><small title="星期日" aria-label="星期日"
                    class="col">周日</small><small title="星期一" aria-label="星期一" class="col">周一</small><small title="星期二"
                    aria-label="星期二" class="col">周二</small><small title="星期三" aria-label="星期三"
                    class="col">周三</small><small title="星期四" aria-label="星期四" class="col">周四</small><small title="星期五"
                    aria-label="星期五" class="col">周五</small><small title="星期六" aria-label="星期六" class="col">周六</small>
                </div>
                <div class="b-calendar-grid-body">
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-01-26" aria-hidden="true" aria-label="2020年1月26日星期日"
                      class="col p-0" id="__BVID__1135__cell-2020-01-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26日</span></div>
                    <div role="button" data-date="2020-01-27" aria-hidden="true" aria-label="2020年1月27日星期一"
                      class="col p-0" id="__BVID__1135__cell-2020-01-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27日</span></div>
                    <div role="button" data-date="2020-01-28" aria-hidden="true" aria-label="2020年1月28日星期二"
                      class="col p-0" id="__BVID__1135__cell-2020-01-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28日</span></div>
                    <div role="button" data-date="2020-01-29" aria-hidden="true" aria-label="2020年1月29日星期三"
                      class="col p-0" id="__BVID__1135__cell-2020-01-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29日</span></div>
                    <div role="button" data-date="2020-01-30" aria-hidden="true" aria-label="2020年1月30日星期四"
                      class="col p-0" id="__BVID__1135__cell-2020-01-30_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30日</span></div>
                    <div role="button" data-date="2020-01-31" aria-hidden="true" aria-label="2020年1月31日星期五"
                      class="col p-0" id="__BVID__1135__cell-2020-01-31_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31日</span></div>
                    <div role="button" data-date="2020-02-01" aria-label="2020年2月1日星期六" class="col p-0"
                      id="__BVID__1135__cell-2020-02-01_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-02" aria-label="2020年2月2日星期日" class="col p-0"
                      id="__BVID__1135__cell-2020-02-02_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2日</span>
                    </div>
                    <div role="button" data-date="2020-02-03" aria-label="2020年2月3日星期一" class="col p-0"
                      id="__BVID__1135__cell-2020-02-03_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3日</span>
                    </div>
                    <div role="button" data-date="2020-02-04" aria-label="2020年2月4日星期二" class="col p-0"
                      id="__BVID__1135__cell-2020-02-04_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4日</span>
                    </div>
                    <div role="button" data-date="2020-02-05" aria-label="2020年2月5日星期三" class="col p-0"
                      id="__BVID__1135__cell-2020-02-05_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5日</span>
                    </div>
                    <div role="button" data-date="2020-02-06" aria-label="2020年2月6日星期四" class="col p-0"
                      id="__BVID__1135__cell-2020-02-06_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6日</span>
                    </div>
                    <div role="button" data-date="2020-02-07" aria-label="2020年2月7日星期五" class="col p-0"
                      id="__BVID__1135__cell-2020-02-07_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7日</span>
                    </div>
                    <div role="button" data-date="2020-02-08" aria-label="2020年2月8日星期六" class="col p-0"
                      id="__BVID__1135__cell-2020-02-08_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-09" aria-label="2020年2月9日星期日" class="col p-0"
                      id="__BVID__1135__cell-2020-02-09_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9日</span>
                    </div>
                    <div role="button" data-date="2020-02-10" aria-label="2020年2月10日星期一" class="col p-0"
                      id="__BVID__1135__cell-2020-02-10_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10日</span>
                    </div>
                    <div role="button" data-date="2020-02-11" aria-label="2020年2月11日星期二" class="col p-0"
                      id="__BVID__1135__cell-2020-02-11_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11日</span>
                    </div>
                    <div role="button" data-date="2020-02-12" aria-label="2020年2月12日星期三" class="col p-0"
                      id="__BVID__1135__cell-2020-02-12_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12日</span>
                    </div>
                    <div role="button" data-date="2020-02-13" aria-label="2020年2月13日星期四" class="col p-0"
                      id="__BVID__1135__cell-2020-02-13_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13日</span>
                    </div>
                    <div role="button" data-date="2020-02-14" aria-label="2020年2月14日星期五" class="col p-0"
                      id="__BVID__1135__cell-2020-02-14_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14日</span>
                    </div>
                    <div role="button" data-date="2020-02-15" aria-label="2020年2月15日星期六" class="col p-0"
                      id="__BVID__1135__cell-2020-02-15_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-16" aria-label="2020年2月16日星期日" class="col p-0"
                      id="__BVID__1135__cell-2020-02-16_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16日</span>
                    </div>
                    <div role="button" data-date="2020-02-17" aria-label="2020年2月17日星期一" class="col p-0"
                      id="__BVID__1135__cell-2020-02-17_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17日</span>
                    </div>
                    <div role="button" data-date="2020-02-18" aria-label="2020年2月18日星期二" class="col p-0"
                      id="__BVID__1135__cell-2020-02-18_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18日</span>
                    </div>
                    <div role="button" data-date="2020-02-19" aria-label="2020年2月19日星期三" class="col p-0"
                      id="__BVID__1135__cell-2020-02-19_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19日</span>
                    </div>
                    <div role="button" data-date="2020-02-20" aria-label="2020年2月20日星期四" class="col p-0"
                      id="__BVID__1135__cell-2020-02-20_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20日</span>
                    </div>
                    <div role="button" data-date="2020-02-21" aria-label="2020年2月21日星期五" class="col p-0"
                      id="__BVID__1135__cell-2020-02-21_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21日</span>
                    </div>
                    <div role="button" data-date="2020-02-22" aria-label="2020年2月22日星期六" class="col p-0"
                      id="__BVID__1135__cell-2020-02-22_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22日</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-23" aria-label="2020年2月23日星期日" class="col p-0"
                      id="__BVID__1135__cell-2020-02-23_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23日</span>
                    </div>
                    <div role="button" data-date="2020-02-24" aria-label="2020年2月24日星期一" class="col p-0"
                      id="__BVID__1135__cell-2020-02-24_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24日</span>
                    </div>
                    <div role="button" data-date="2020-02-25" aria-label="2020年2月25日星期二 (Today)" class="col p-0"
                      id="__BVID__1135__cell-2020-02-25_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25日</span>
                    </div>
                    <div role="button" data-date="2020-02-26" aria-label="2020年2月26日星期三" class="col p-0"
                      id="__BVID__1135__cell-2020-02-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26日</span>
                    </div>
                    <div role="button" data-date="2020-02-27" aria-label="2020年2月27日星期四" class="col p-0"
                      id="__BVID__1135__cell-2020-02-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27日</span>
                    </div>
                    <div role="button" data-date="2020-02-28" aria-label="2020年2月28日星期五" class="col p-0"
                      id="__BVID__1135__cell-2020-02-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28日</span>
                    </div>
                    <div role="button" data-date="2020-02-29" aria-label="2020年2月29日星期六" class="col p-0"
                      id="__BVID__1135__cell-2020-02-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29日</span>
                    </div>
                  </div>
                </div>
                <footer class="border-top small text-muted text-center bg-light" id="__BVID__1135__calendar-grid-help_">
                  <div class="small">Use cursor keys to navigate calendar dates</div>
                </footer>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">block</span> <span class="hljs-attr">local</span>=<span class="hljs-string">"en-US"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
        <p>注意，<em>不建议</em> 将宽度设置为 <code translate="no" class="notranslate text-nowrap">260px</code> 以下，否则可能会出现截断和布局问题。
        </p>
        <h3 id="hiding-the-top-selected-date-header" class="bv-no-focus-ring"><span
            class="bd-content-title">隐藏顶部选择的日期标题<a class="anchorjs-link" href="#hiding-the-top-selected-date-header"
              aria-labelledby="hiding-the-top-selected-date-header"></a></span></h3>
        <p>默认情况下，当前选择的日期将显示在日历组件的顶部，并使用地区语言进行格式化。</p>
        <p>您可以通过 <code translate="no" class="notranslate text-nowrap">hide-header</code>
          属性隐藏该标题。请注意，这只会在视觉上隐藏所选日期，而将其作为 <code translate="no" class="notranslate text-nowrap">aria-live</code>
          区域提供给屏幕阅读器用户。</p>
        <h3 id="border-and-padding" class="bv-no-focus-ring"><span class="bd-content-title">边框和填充<a
              class="anchorjs-link" href="#border-and-padding" aria-labelledby="border-and-padding"></a></span></h3>
        <p>想要一个有填充边框的日历吗?使用Bootstrap的 <a href="../../../bootstrap-vue/docs/reference/utility-classes"
            class="font-weight-bold">边框和填充工具类</a> 来添加边框和填充：</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-border-padding notranslate">
          <div class="b-calendar border rounded p-2" style="display: inline-block;">
            <div dir="ltr" lang="en" role="group"
              aria-describedby="__BVID__1137__calendar-value_ __BVID__1137__calendar-grid-help_" class="d-inline-block"
              style="width: 270px;" id="__BVID__1137">
              <header class="mb-1">
                <output role="status" data-selected="" aria-live="polite"
                  class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1137__calendar-value_"
                  for="__BVID__1137__calendar-grid_" aria-atomic="true">No date selected</output>
              </header>
              <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                id="__BVID__1137__calendar-nav_" aria-controls="__BVID__1137__calendar-grid_">
                <button title="Previous year" type="button" aria-label="Previous year" aria-keyshortcuts="Alt+PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Previous month" type="button" aria-label="Previous month" aria-keyshortcuts="PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <circle cx="10" cy="10" r="8"></circle>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
              </div>
              <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                class="form-control h-auto text-center p-0 mb-0" id="__BVID__1137__calendar-grid_"
                aria-labelledby="__BVID__1137__calendar-grid-caption_"
                aria-describedby="__BVID__1137__calendar-grid-help_"
                aria-activedescendant="__BVID__1137__cell-2020-02-25_">
                <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1137__calendar-grid-caption_"
                  aria-live="polite" aria-atomic="true">February 2020</header>
                <div aria-hidden="true" class="row no-gutters border-bottom"><small title="Sunday" aria-label="Sunday"
                    class="col">Sun</small><small title="Monday" aria-label="Monday" class="col">Mon</small><small
                    title="Tuesday" aria-label="Tuesday" class="col">Tue</small><small title="Wednesday"
                    aria-label="Wednesday" class="col">Wed</small><small title="Thursday" aria-label="Thursday"
                    class="col">Thu</small><small title="Friday" aria-label="Friday" class="col">Fri</small><small
                    title="Saturday" aria-label="Saturday" class="col">Sat</small></div>
                <div class="b-calendar-grid-body">
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-01-26" aria-hidden="true" aria-label="Sunday, January 26, 2020"
                      class="col p-0" id="__BVID__1137__cell-2020-01-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26</span></div>
                    <div role="button" data-date="2020-01-27" aria-hidden="true" aria-label="Monday, January 27, 2020"
                      class="col p-0" id="__BVID__1137__cell-2020-01-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27</span></div>
                    <div role="button" data-date="2020-01-28" aria-hidden="true" aria-label="Tuesday, January 28, 2020"
                      class="col p-0" id="__BVID__1137__cell-2020-01-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28</span></div>
                    <div role="button" data-date="2020-01-29" aria-hidden="true"
                      aria-label="Wednesday, January 29, 2020" class="col p-0" id="__BVID__1137__cell-2020-01-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29</span></div>
                    <div role="button" data-date="2020-01-30" aria-hidden="true" aria-label="Thursday, January 30, 2020"
                      class="col p-0" id="__BVID__1137__cell-2020-01-30_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30</span></div>
                    <div role="button" data-date="2020-01-31" aria-hidden="true" aria-label="Friday, January 31, 2020"
                      class="col p-0" id="__BVID__1137__cell-2020-01-31_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31</span></div>
                    <div role="button" data-date="2020-02-01" aria-label="Saturday, February 1, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-01_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-02" aria-label="Sunday, February 2, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-02_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2</span>
                    </div>
                    <div role="button" data-date="2020-02-03" aria-label="Monday, February 3, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-03_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3</span>
                    </div>
                    <div role="button" data-date="2020-02-04" aria-label="Tuesday, February 4, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-04_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4</span>
                    </div>
                    <div role="button" data-date="2020-02-05" aria-label="Wednesday, February 5, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-05_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5</span>
                    </div>
                    <div role="button" data-date="2020-02-06" aria-label="Thursday, February 6, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-06_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6</span>
                    </div>
                    <div role="button" data-date="2020-02-07" aria-label="Friday, February 7, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-07_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7</span>
                    </div>
                    <div role="button" data-date="2020-02-08" aria-label="Saturday, February 8, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-08_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-09" aria-label="Sunday, February 9, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-09_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9</span>
                    </div>
                    <div role="button" data-date="2020-02-10" aria-label="Monday, February 10, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-10_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10</span>
                    </div>
                    <div role="button" data-date="2020-02-11" aria-label="Tuesday, February 11, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-11_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11</span>
                    </div>
                    <div role="button" data-date="2020-02-12" aria-label="Wednesday, February 12, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-12_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12</span>
                    </div>
                    <div role="button" data-date="2020-02-13" aria-label="Thursday, February 13, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-13_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13</span>
                    </div>
                    <div role="button" data-date="2020-02-14" aria-label="Friday, February 14, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-14_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14</span>
                    </div>
                    <div role="button" data-date="2020-02-15" aria-label="Saturday, February 15, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-15_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-16" aria-label="Sunday, February 16, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-16_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16</span>
                    </div>
                    <div role="button" data-date="2020-02-17" aria-label="Monday, February 17, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-17_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17</span>
                    </div>
                    <div role="button" data-date="2020-02-18" aria-label="Tuesday, February 18, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-18_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18</span>
                    </div>
                    <div role="button" data-date="2020-02-19" aria-label="Wednesday, February 19, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-19_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19</span>
                    </div>
                    <div role="button" data-date="2020-02-20" aria-label="Thursday, February 20, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-20_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20</span>
                    </div>
                    <div role="button" data-date="2020-02-21" aria-label="Friday, February 21, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-21_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21</span>
                    </div>
                    <div role="button" data-date="2020-02-22" aria-label="Saturday, February 22, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-22_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-23" aria-label="Sunday, February 23, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-23_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23</span>
                    </div>
                    <div role="button" data-date="2020-02-24" aria-label="Monday, February 24, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-24_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24</span>
                    </div>
                    <div role="button" data-date="2020-02-25" aria-label="Tuesday, February 25, 2020 (Today)"
                      class="col p-0" id="__BVID__1137__cell-2020-02-25_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25</span>
                    </div>
                    <div role="button" data-date="2020-02-26" aria-label="Wednesday, February 26, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26</span>
                    </div>
                    <div role="button" data-date="2020-02-27" aria-label="Thursday, February 27, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27</span>
                    </div>
                    <div role="button" data-date="2020-02-28" aria-label="Friday, February 28, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28</span>
                    </div>
                    <div role="button" data-date="2020-02-29" aria-label="Saturday, February 29, 2020" class="col p-0"
                      id="__BVID__1137__cell-2020-02-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29</span>
                    </div>
                  </div>
                </div>
                <footer class="border-top small text-muted text-center bg-light" id="__BVID__1137__calendar-grid-help_">
                  <div class="small">Use cursor keys to navigate calendar dates</div>
                </footer>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"border rounded p-2"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></pre></figure>
        <h3 id="default-slot" class="bv-no-focus-ring"><span class="bd-content-title">默认插槽<a class="anchorjs-link"
              href="#default-slot" aria-labelledby="default-slot"></a></span></h3>
        <p>通过使用默认插槽，在日历界面的底部提供可选内容。该插槽可用于添加按钮，如选择 <code translate="no" class="notranslate text-nowrap">今天</code> 或 <code
            translate="no" class="notranslate text-nowrap">重置</code> 等等。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-default-slot notranslate">
          <div class="b-calendar" style="display: inline-block;">
            <div dir="ltr" lang="en" role="group"
              aria-describedby="__BVID__1139__calendar-value_ __BVID__1139__calendar-grid-help_" class="d-inline-block"
              style="width: 270px;" id="__BVID__1139">
              <header class="mb-1">
                <output role="status" data-selected="" aria-live="polite"
                  class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1139__calendar-value_"
                  for="__BVID__1139__calendar-grid_" aria-atomic="true">No date selected</output>
              </header>
              <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                id="__BVID__1139__calendar-nav_" aria-controls="__BVID__1139__calendar-grid_">
                <button title="Previous year" type="button" aria-label="Previous year" aria-keyshortcuts="Alt+PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Previous month" type="button" aria-label="Previous month" aria-keyshortcuts="PageDown"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g>
                          <circle cx="10" cy="10" r="8"></circle>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <path fill-rule="evenodd"
                            d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                            clip-rule="evenodd"></path>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
                <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                  class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                  <div aria-hidden="true">
                    <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                      xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                      <g transform="translate(0 -0.625)">
                        <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(-2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                          <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                            <g transform="translate(2.5 0)">
                              <g>
                                <path fill-rule="evenodd"
                                  d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                  clip-rule="evenodd"></path>
                              </g>
                            </g>
                          </svg>
                        </g>
                      </g>
                    </svg>
                  </div>
                </button>
              </div>
              <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                class="form-control h-auto text-center p-0 mb-0" id="__BVID__1139__calendar-grid_"
                aria-labelledby="__BVID__1139__calendar-grid-caption_"
                aria-describedby="__BVID__1139__calendar-grid-help_"
                aria-activedescendant="__BVID__1139__cell-2020-02-25_">
                <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1139__calendar-grid-caption_"
                  aria-live="polite" aria-atomic="true">February 2020</header>
                <div aria-hidden="true" class="row no-gutters border-bottom"><small title="Sunday" aria-label="Sunday"
                    class="col">Sun</small><small title="Monday" aria-label="Monday" class="col">Mon</small><small
                    title="Tuesday" aria-label="Tuesday" class="col">Tue</small><small title="Wednesday"
                    aria-label="Wednesday" class="col">Wed</small><small title="Thursday" aria-label="Thursday"
                    class="col">Thu</small><small title="Friday" aria-label="Friday" class="col">Fri</small><small
                    title="Saturday" aria-label="Saturday" class="col">Sat</small></div>
                <div class="b-calendar-grid-body">
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-01-26" aria-hidden="true" aria-label="Sunday, January 26, 2020"
                      class="col p-0" id="__BVID__1139__cell-2020-01-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26</span></div>
                    <div role="button" data-date="2020-01-27" aria-hidden="true" aria-label="Monday, January 27, 2020"
                      class="col p-0" id="__BVID__1139__cell-2020-01-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27</span></div>
                    <div role="button" data-date="2020-01-28" aria-hidden="true" aria-label="Tuesday, January 28, 2020"
                      class="col p-0" id="__BVID__1139__cell-2020-01-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28</span></div>
                    <div role="button" data-date="2020-01-29" aria-hidden="true"
                      aria-label="Wednesday, January 29, 2020" class="col p-0" id="__BVID__1139__cell-2020-01-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29</span></div>
                    <div role="button" data-date="2020-01-30" aria-hidden="true" aria-label="Thursday, January 30, 2020"
                      class="col p-0" id="__BVID__1139__cell-2020-01-30_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30</span></div>
                    <div role="button" data-date="2020-01-31" aria-hidden="true" aria-label="Friday, January 31, 2020"
                      class="col p-0" id="__BVID__1139__cell-2020-01-31_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31</span></div>
                    <div role="button" data-date="2020-02-01" aria-label="Saturday, February 1, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-01_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-02" aria-label="Sunday, February 2, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-02_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2</span>
                    </div>
                    <div role="button" data-date="2020-02-03" aria-label="Monday, February 3, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-03_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3</span>
                    </div>
                    <div role="button" data-date="2020-02-04" aria-label="Tuesday, February 4, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-04_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4</span>
                    </div>
                    <div role="button" data-date="2020-02-05" aria-label="Wednesday, February 5, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-05_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5</span>
                    </div>
                    <div role="button" data-date="2020-02-06" aria-label="Thursday, February 6, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-06_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6</span>
                    </div>
                    <div role="button" data-date="2020-02-07" aria-label="Friday, February 7, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-07_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7</span>
                    </div>
                    <div role="button" data-date="2020-02-08" aria-label="Saturday, February 8, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-08_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-09" aria-label="Sunday, February 9, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-09_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9</span>
                    </div>
                    <div role="button" data-date="2020-02-10" aria-label="Monday, February 10, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-10_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10</span>
                    </div>
                    <div role="button" data-date="2020-02-11" aria-label="Tuesday, February 11, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-11_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11</span>
                    </div>
                    <div role="button" data-date="2020-02-12" aria-label="Wednesday, February 12, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-12_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12</span>
                    </div>
                    <div role="button" data-date="2020-02-13" aria-label="Thursday, February 13, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-13_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13</span>
                    </div>
                    <div role="button" data-date="2020-02-14" aria-label="Friday, February 14, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-14_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14</span>
                    </div>
                    <div role="button" data-date="2020-02-15" aria-label="Saturday, February 15, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-15_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-16" aria-label="Sunday, February 16, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-16_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16</span>
                    </div>
                    <div role="button" data-date="2020-02-17" aria-label="Monday, February 17, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-17_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17</span>
                    </div>
                    <div role="button" data-date="2020-02-18" aria-label="Tuesday, February 18, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-18_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18</span>
                    </div>
                    <div role="button" data-date="2020-02-19" aria-label="Wednesday, February 19, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-19_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19</span>
                    </div>
                    <div role="button" data-date="2020-02-20" aria-label="Thursday, February 20, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-20_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20</span>
                    </div>
                    <div role="button" data-date="2020-02-21" aria-label="Friday, February 21, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-21_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21</span>
                    </div>
                    <div role="button" data-date="2020-02-22" aria-label="Saturday, February 22, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-22_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22</span>
                    </div>
                  </div>
                  <div class="row no-gutters">
                    <div role="button" data-date="2020-02-23" aria-label="Sunday, February 23, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-23_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23</span>
                    </div>
                    <div role="button" data-date="2020-02-24" aria-label="Monday, February 24, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-24_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24</span>
                    </div>
                    <div role="button" data-date="2020-02-25" aria-label="Tuesday, February 25, 2020 (Today)"
                      class="col p-0" id="__BVID__1139__cell-2020-02-25_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25</span>
                    </div>
                    <div role="button" data-date="2020-02-26" aria-label="Wednesday, February 26, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-26_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26</span>
                    </div>
                    <div role="button" data-date="2020-02-27" aria-label="Thursday, February 27, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-27_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27</span>
                    </div>
                    <div role="button" data-date="2020-02-28" aria-label="Friday, February 28, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-28_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28</span>
                    </div>
                    <div role="button" data-date="2020-02-29" aria-label="Saturday, February 29, 2020" class="col p-0"
                      id="__BVID__1139__cell-2020-02-29_"><span
                        class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29</span>
                    </div>
                  </div>
                </div>
                <footer class="border-top small text-muted text-center bg-light" id="__BVID__1139__calendar-grid-help_">
                  <div class="small">Use cursor keys to navigate calendar dates</div>
                </footer>
              </div>
              <footer class="mt-2">
                <div dir="ltr" class="d-flex">
                  <button type="button" class="btn ml-auto btn-outline-primary btn-sm"> Set Today </button>
                </div>
              </footer>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">value-as-date</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-flex"</span> <span class="hljs-attr">dir</span>=<span class="hljs-string">"ltr"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
        <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
        <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span>
        <span class="hljs-attr">v-if</span>=<span class="hljs-string">"value"</span>
        @<span class="hljs-attr">click</span>=<span class="hljs-string">"clearDate"</span>
      &gt;</span>
        Clear date
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
        <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>
        <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-primary"</span>
        <span class="hljs-attr">class</span>=<span class="hljs-string">"ml-auto"</span>
        @<span class="hljs-attr">click</span>=<span class="hljs-string">"setToday"</span>
      &gt;</span>
        Set Today
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-literal">null</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      setToday() {
        <span class="hljs-keyword">const</span> now = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
        <span class="hljs-keyword">this</span>.value = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(now.getFullYear(), now.getMonth(), now.getDate())
      },
      clearDate() {
        <span class="hljs-keyword">this</span>.value = <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <h3 id="adding-css-classes-to-specific-dates" class="bv-no-focus-ring"><span
            class="bd-content-title">为特定日期添加CSS类<a class="anchorjs-link" href="#adding-css-classes-to-specific-dates"
              aria-labelledby="adding-css-classes-to-specific-dates"></a></span></h3>
        <p>如果需要突出显示一个或多个特定日期，请将 <code translate="no" class="notranslate text-nowrap">date-info-fn</code>
          设置为一个函数的引用，该函数将返回一个CSS类字符串(或字符串数组)以应用于日期的单元格。函数传递两个参数：</p>
        <ul>
          <li><code translate="no" class="notranslate text-nowrap">ymd</code> 日期为 <code translate="no"
              class="notranslate text-nowrap">YYYY-MM-DD</code> 字符串</li>
          <li><code translate="no" class="notranslate text-nowrap">date</code> 日期为 <code translate="no"
              class="notranslate text-nowrap">Date</code> 对象</li>
        </ul>
        <p>该函数可以返回字符串或字符串数组。如果没有设置类，则可以返回空字符串（<code translate="no" class="notranslate text-nowrap">''</code>），空数组（<code
            translate="no" class="notranslate text-nowrap">[]</code>），或 <code translate="no"
            class="notranslate text-nowrap">null</code> 。</p>
        <p>在本例中，我们使用 <code translate="no" class="notranslate text-nowrap">table-{variant}</code> color
          类来设置日期单元格的背景颜色。<code translate="no" class="notranslate text-nowrap">table-{variant}</code> color
          类工作得很好，因为它们是主题颜色的柔和版本。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-date-classes notranslate">
          <div>
            <div class="b-calendar" style="display: inline-block;">
              <div dir="ltr" lang="en" role="group"
                aria-describedby="__BVID__1141__calendar-value_ __BVID__1141__calendar-grid-help_"
                class="d-inline-block" style="width: 270px;" id="__BVID__1141">
                <header class="mb-1">
                  <output role="status" data-selected="" aria-live="polite"
                    class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1141__calendar-value_"
                    for="__BVID__1141__calendar-grid_" aria-atomic="true">No date selected</output>
                </header>
                <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                  id="__BVID__1141__calendar-nav_" aria-controls="__BVID__1141__calendar-grid_">
                  <button title="Previous year" type="button" aria-label="Previous year"
                    aria-keyshortcuts="Alt+PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Previous month" type="button" aria-label="Previous month" aria-keyshortcuts="PageDown"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g>
                            <circle cx="10" cy="10" r="8"></circle>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <path fill-rule="evenodd"
                              d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                              clip-rule="evenodd"></path>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                  <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                    class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                    <div aria-hidden="true">
                      <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                        xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                        <g transform="translate(0 -0.625)">
                          <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(-2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                            <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                              xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                              <g transform="translate(2.5 0)">
                                <g>
                                  <path fill-rule="evenodd"
                                    d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                    clip-rule="evenodd"></path>
                                </g>
                              </g>
                            </svg>
                          </g>
                        </g>
                      </svg>
                    </div>
                  </button>
                </div>
                <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                  class="form-control h-auto text-center p-0 mb-0" id="__BVID__1141__calendar-grid_"
                  aria-labelledby="__BVID__1141__calendar-grid-caption_"
                  aria-describedby="__BVID__1141__calendar-grid-help_"
                  aria-activedescendant="__BVID__1141__cell-2020-02-25_">
                  <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1141__calendar-grid-caption_"
                    aria-live="polite" aria-atomic="true">February 2020</header>
                  <div aria-hidden="true" class="row no-gutters border-bottom"><small title="Sunday" aria-label="Sunday"
                      class="col">Sun</small><small title="Monday" aria-label="Monday" class="col">Mon</small><small
                      title="Tuesday" aria-label="Tuesday" class="col">Tue</small><small title="Wednesday"
                      aria-label="Wednesday" class="col">Wed</small><small title="Thursday" aria-label="Thursday"
                      class="col">Thu</small><small title="Friday" aria-label="Friday" class="col">Fri</small><small
                      title="Saturday" aria-label="Saturday" class="col">Sat</small></div>
                  <div class="b-calendar-grid-body">
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-01-26" aria-hidden="true" aria-label="Sunday, January 26, 2020"
                        class="col p-0" id="__BVID__1141__cell-2020-01-26_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26</span></div>
                      <div role="button" data-date="2020-01-27" aria-hidden="true" aria-label="Monday, January 27, 2020"
                        class="col p-0" id="__BVID__1141__cell-2020-01-27_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27</span></div>
                      <div role="button" data-date="2020-01-28" aria-hidden="true"
                        aria-label="Tuesday, January 28, 2020" class="col p-0" id="__BVID__1141__cell-2020-01-28_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28</span></div>
                      <div role="button" data-date="2020-01-29" aria-hidden="true"
                        aria-label="Wednesday, January 29, 2020" class="col p-0" id="__BVID__1141__cell-2020-01-29_">
                        <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29</span>
                      </div>
                      <div role="button" data-date="2020-01-30" aria-hidden="true"
                        aria-label="Thursday, January 30, 2020" class="col p-0" id="__BVID__1141__cell-2020-01-30_">
                        <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30</span>
                      </div>
                      <div role="button" data-date="2020-01-31" aria-hidden="true" aria-label="Friday, January 31, 2020"
                        class="col p-0" id="__BVID__1141__cell-2020-01-31_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31</span></div>
                      <div role="button" data-date="2020-02-01" aria-label="Saturday, February 1, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-01_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-02" aria-label="Sunday, February 2, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-02_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2</span>
                      </div>
                      <div role="button" data-date="2020-02-03" aria-label="Monday, February 3, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-03_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3</span>
                      </div>
                      <div role="button" data-date="2020-02-04" aria-label="Tuesday, February 4, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-04_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4</span>
                      </div>
                      <div role="button" data-date="2020-02-05" aria-label="Wednesday, February 5, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-05_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5</span>
                      </div>
                      <div role="button" data-date="2020-02-06" aria-label="Thursday, February 6, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-06_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6</span>
                      </div>
                      <div role="button" data-date="2020-02-07" aria-label="Friday, February 7, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-07_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7</span>
                      </div>
                      <div role="button" data-date="2020-02-08" aria-label="Saturday, February 8, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-08_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-09" aria-label="Sunday, February 9, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-09_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9</span>
                      </div>
                      <div role="button" data-date="2020-02-10" aria-label="Monday, February 10, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-10_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10</span>
                      </div>
                      <div role="button" data-date="2020-02-11" aria-label="Tuesday, February 11, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-11_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11</span>
                      </div>
                      <div role="button" data-date="2020-02-12" aria-label="Wednesday, February 12, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-12_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12</span>
                      </div>
                      <div role="button" data-date="2020-02-13" aria-label="Thursday, February 13, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-13_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13</span>
                      </div>
                      <div role="button" data-date="2020-02-14" aria-label="Friday, February 14, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-14_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14</span>
                      </div>
                      <div role="button" data-date="2020-02-15" aria-label="Saturday, February 15, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-15_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-16" aria-label="Sunday, February 16, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-16_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16</span>
                      </div>
                      <div role="button" data-date="2020-02-17" aria-label="Monday, February 17, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-17_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17</span>
                      </div>
                      <div role="button" data-date="2020-02-18" aria-label="Tuesday, February 18, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-18_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18</span>
                      </div>
                      <div role="button" data-date="2020-02-19" aria-label="Wednesday, February 19, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-19_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19</span>
                      </div>
                      <div role="button" data-date="2020-02-20" aria-label="Thursday, February 20, 2020"
                        class="col p-0 table-info" id="__BVID__1141__cell-2020-02-20_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20</span>
                      </div>
                      <div role="button" data-date="2020-02-21" aria-label="Friday, February 21, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-21_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21</span>
                      </div>
                      <div role="button" data-date="2020-02-22" aria-label="Saturday, February 22, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-22_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22</span>
                      </div>
                    </div>
                    <div class="row no-gutters">
                      <div role="button" data-date="2020-02-23" aria-label="Sunday, February 23, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-23_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23</span>
                      </div>
                      <div role="button" data-date="2020-02-24" aria-label="Monday, February 24, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-24_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24</span>
                      </div>
                      <div role="button" data-date="2020-02-25" aria-label="Tuesday, February 25, 2020 (Today)"
                        class="col p-0" id="__BVID__1141__cell-2020-02-25_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25</span>
                      </div>
                      <div role="button" data-date="2020-02-26" aria-label="Wednesday, February 26, 2020"
                        class="col p-0" id="__BVID__1141__cell-2020-02-26_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26</span>
                      </div>
                      <div role="button" data-date="2020-02-27" aria-label="Thursday, February 27, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-27_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27</span>
                      </div>
                      <div role="button" data-date="2020-02-28" aria-label="Friday, February 28, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-28_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28</span>
                      </div>
                      <div role="button" data-date="2020-02-29" aria-label="Saturday, February 29, 2020" class="col p-0"
                        id="__BVID__1141__cell-2020-02-29_"><span
                          class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29</span>
                      </div>
                    </div>
                  </div>
                  <footer class="border-top small text-muted text-center bg-light"
                    id="__BVID__1141__calendar-grid-help_">
                    <div class="small">Use cursor keys to navigate calendar dates</div>
                  </footer>
                </div>
              </div>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> <span class="hljs-attr">:date-info-fn</span>=<span class="hljs-string">"dateClass"</span> <span class="hljs-attr">locale</span>=<span class="hljs-string">"en"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>
      }
    },
    <span class="hljs-attr">methods</span>: {
      dateClass(ymd, date) {
        <span class="hljs-keyword">const</span> day = date.getDate()
        <span class="hljs-keyword">return</span> day &gt;= <span class="hljs-number">10</span> &amp;&amp; day &lt;= <span class="hljs-number">20</span> ? <span class="hljs-string">'table-info'</span> : <span class="hljs-string">''</span>
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <p>注意，该函数在 <a href="#date-constraints" class="font-weight-bold">禁用日期</a> <em>不会</em> 被调用。</p>
        <p><strong>辅助功能说明：</strong></p>
        <p>当使用类向日期传递特定的含义时，您应该包括日历之外的其他上下文（或通过默认插槽）以突出显示日期（例如在<code translate="no"
            class="notranslate text-nowrap">aria-live</code> 区域），特别是针对屏幕阅读器用户。</p>
        <p>BootstrapVue可能在未来添加一个功能，以添加在屏幕阅读器友好的文本说明上
          通过这个功能突出显示日期。</p>
        <h2 id="events" class="bv-no-focus-ring"><span class="bd-content-title">事件<a class="anchorjs-link"
              href="#events" aria-labelledby="events"></a></span></h2>
        <h3 id="input-event" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no"
              class="notranslate text-nowrap">input</code> 事件<a class="anchorjs-link" href="#input-event"
              aria-labelledby="input-event"></a></span></h3>
        <p>The <code translate="no" class="notranslate text-nowrap">'input'</code> 事件在更新
          <code translate="no" class="notranslate text-nowrap">v-model</code> 时发出。该事件只有一个参数，即所选日期。默认情况下，该值是 <code
            translate="no" class="notranslate text-nowrap">YYYY-MM-DD</code> 格式的字符串（如果没有选择日期，则为空字符串）。如果将属性 <code
            translate="no" class="notranslate text-nowrap">value-as-date</code> ，则第一个参数将改 <code translate="no"
            class="notranslate text-nowrap">Date</code> 对象（如果没有选择日期，则为 <code translate="no"
            class="notranslate text-nowrap">null</code> ）。</p>
        <p>如果设置了 <code translate="no" class="notranslate text-nowrap">disabled</code> 或 <code translate="no"
            class="notranslate text-nowrap">readonly</code> 的属性，则 <strong>不会</strong> 发出 <code translate="no"
            class="notranslate text-nowrap">'input'</code> 事件。</p>

        <h3 id="selected-event" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no"
              class="notranslate text-nowrap">selected</code> 事件<a class="anchorjs-link" href="#selected-event"
              aria-labelledby="selected-event"></a></span></h3>
        <p> <code translate="no" class="notranslate text-nowrap">'selected'</code> 事件在用户单击非禁用日期时发出。事件传递两个参数：</p>
        <ul>
          <li><code translate="no" class="notranslate text-nowrap">ymd</code> 选择的日期作为 <code translate="no"
              class="notranslate text-nowrap">YYYY-MM-DD</code> 字符串</li>
          <li><code translate="no" class="notranslate text-nowrap">date</code> 选择的日期作为 <code translate="no"
              class="notranslate text-nowrap">Date</code> 对象</li>
        </ul>
        <p>如果用户单击已经选择的日期，则仍然会发出所 <code translate="no" class="notranslate text-nowrap">selected</code> 事件，这与 <code
            translate="no" class="notranslate text-nowrap">'input'</code> 事件相反，后者 <em>不会</em> 重新发出已选择的日期。</p>
        <p>如果设置了 <code translate="no" class="notranslate text-nowrap">disabled</code> 或 <code translate="no"
            class="notranslate text-nowrap">readonly</code> 属性，则 <strong>不会</strong> 发出 <code translate="no"
            class="notranslate text-nowrap">'selected'</code> 事件。</p>
        <h3 id="context-event" class="bv-no-focus-ring"><span class="bd-content-title"><code translate="no"
              class="notranslate text-nowrap">context</code> 事件<a class="anchorjs-link" href="#context-event"
              aria-labelledby="context-event"></a></span></h3>
        <p> <code translate="no" class="notranslate text-nowrap">'context'</code>
          事件在用户选择日期或导航日历时发出（通过光标键、页面向上/向下键、主键或结束键，或使用日历导航按钮）。在创建组件时（插入到DOM之前），或者在已解析的地区发生更改时，也会发出此消息。 </p>
        <p>设置 <code translate="no" class="notranslate text-nowrap">readonly</code> 属性时，当用户导航日历时仍然会发出事件。当设置了 <code
            translate="no" class="notranslate text-nowrap">disabled</code>
          属性时，它将不会被发出（除了创建日历时的初始发出）。</p>
        <p> <code translate="no" class="notranslate text-nowrap">'context'</code> 事件作为唯一的参数被传递给一个context对象，它有以下属性：</p>
        <div class="table-responsive-sm">
          <table class="b-table table table-bordered table-striped bv-docs-table">
            <thead class="thead-default">
              <tr>
                <th>属性</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">selectedYMD</code></td>
                <td>选定的日期值（<code translate="no" class="notranslate text-nowrap">YYYY-MM-DD</code>
                  ），如果没有选定日期，则为空字符串</td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">selectedDate</code></td>
                <td>选定的日期值作为 <code translate="no" class="notranslate text-nowrap">Date</code> 对象，如果没有选定日期，则为 <code
                    translate="no" class="notranslate text-nowrap">null</code></td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">selectedFormatted</code></td>
                <td>在当前语言环境中格式化的选定日期。如果没有选择日期，这将是 <code translate="no"
                    class="notranslate text-nowrap">label-no-date-selected</code> 属性</td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">activeYMD</code></td>
                <td>可以接收焦点为字符串的日历日按钮的当前日期（<code translate="no" class="notranslate text-nowrap">YYYY-MM-DD</code> 格式）
                </td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">activeDate</code></td>
                <td>可以作为 <code translate="no" class="notranslate text-nowrap">Date</code> 对象接收焦点的日历日按钮的当前日期</td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">activeFormated</code></td>
                <td>在当前语言环境中格式化的活动日期</td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">disabled</code></td>
                <td>如果活动日期被禁用，则为 <code translate="no" class="notranslate text-nowrap">true</code> ，否则为 <code
                    translate="no" class="notranslate text-nowrap">false</code></td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">locale</code></td>
                <td>已解析的语言环境（可能与请求的语言环境不同）</td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">calendarLocale</code></td>
                <td>日历使用的已解析区域设置，可选地包括日历类型（i.e. 'gregory'）。
                  通常这与 <code translate="no"
                    class="notranslate text-nowrap">locale</code>相同，但可能包含使用的日历类型，例如在选择波斯语言环境（<code translate="no"
                    class="notranslate text-nowrap">'fa'</code>）时使用的 <code translate="no"
                    class="notranslate text-nowrap">fa-u-ca-gregory</code> 。</td>
              </tr>
              <tr>
                <td><code translate="no" class="notranslate text-nowrap">isRTL</code></td>
                <td>如果日历是RTL（从右到左）方向，则为 <code translate="no" class="notranslate text-nowrap">true</code> 。如果LTR（从左到右）为
                  <code translate="no" class="notranslate text-nowrap">false</code> 。</td>
              </tr>
            </tbody>
          </table>
        </div>
        <p>如果通过 <code translate="no" class="notranslate text-nowrap">Intl.DateTimeFormat</code> 手动设置日期格式，请使用 <code
            translate="no" class="notranslate text-nowrap">calendarLocale</code> 属性值而不是 <code translate="no"
            class="notranslate text-nowrap">locale</code> 属性值，以确保使用与 <code translate="no"
            class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 相同的日历约定。 对于未完全实现 <code translate="no"
            class="notranslate text-nowrap">Intl.DateTimeFormat</code> 的所有功能的IE 11浏览器尤其如此。 有关更多详细信息，请参阅下面的 <a
            href="#internationalization" class="font-weight-bold">国际化部分</a> 。</p>
        <h2 id="internationalization" class="bv-no-focus-ring"><span class="bd-content-title">国际化<a
              class="anchorjs-link" href="#internationalization" aria-labelledby="internationalization"></a></span></h2>
        <p>日历的国际化通过 <a
            href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat"
            target="_blank" rel="noopener"><code translate="no"
              class="notranslate text-nowrap">Intl.DateTimeFormat</code></a>提供，但应用于日历控件元素的标签（aria标签，所选状态和帮助文本）。你必须为这些标签提供你自己的翻译。可用的语言环境将依赖于浏览器（不是所有浏览器都支持所有语言环境）
        </p>
        <p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 将使用浏览器的默认语言环境，但是您可以通过
          <code translate="no" class="notranslate text-nowrap">locale</code> 属性指定要使用的语言环境。
          该属性接受单个语言环境字符串或语言环境字符串数组（按首选语言环境的顺序列出）。</p>
        <p>日历从星期天开始算起。这可以通过将 <code translate="no" class="notranslate text-nowrap">start-weekday</code> 设置为 <code
            translate="no" class="notranslate text-nowrap">0</code> 到 <code translate="no"
            class="notranslate text-nowrap">6</code> 之间的数字来改变，其中 <code translate="no"
            class="notranslate text-nowrap">0</code>
          表示星期日，<code translate="no" class="notranslate text-nowrap">1</code> 表示星期一，<code translate="no"
            class="notranslate text-nowrap">6</code> 表示星期六。</p>
        <p>发出的 <code translate="no" class="notranslate text-nowrap">context</code> 事件将包括日历解析到的语言环境（可能与请求的语言环境不同，这取决于
          <code translate="no" class="notranslate text-nowrap">Intl</code> 支持的语言环境）。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-calendar-i18n notranslate">
          <div class="row">
            <div class="mb-3 col-12">
              <label for="example-locales">Locale:</label>
              <select id="example-locales" class="custom-select">
                <option value="en-US">English US (en-US)</option>
                <option value="de">German (de)</option>
                <option value="ar-EG">Arabic Egyptian (ar-EG)</option>
                <option value="zh">Chinese (zh)</option>
              </select>
              <label for="example-weekdays">Start weekday:</label>
              <select id="example-weekdays" class="custom-select">
                <option value="0">Sunday</option>
                <option value="1">Monday</option>
                <option value="6">Saturday</option>
              </select>
            </div>
            <div class="col-md-auto">
              <div class="b-calendar" style="display: inline-block;">
                <div dir="ltr" lang="en-US" role="group"
                  aria-describedby="__BVID__1145__calendar-value_ __BVID__1145__calendar-grid-help_"
                  class="d-inline-block" style="width: 270px;" id="__BVID__1145">
                  <header class="mb-1">
                    <output role="status" data-selected="" aria-live="polite"
                      class="d-block text-center rounded border small p-1 mb-1" id="__BVID__1145__calendar-value_"
                      for="__BVID__1145__calendar-grid_" aria-atomic="true">No date selected</output>
                  </header>
                  <div role="group" aria-label="Calendar navigation" class="b-calendar-nav d-flex mx-n1 mb-1"
                    id="__BVID__1145__calendar-nav_" aria-controls="__BVID__1145__calendar-grid_">
                    <button title="Previous year" type="button" aria-label="Previous year"
                      aria-keyshortcuts="Alt+PageDown"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g>
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(-2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Previous month" type="button" aria-label="Previous month"
                      aria-keyshortcuts="PageDown" class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g>
                              <path fill-rule="evenodd"
                                d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                clip-rule="evenodd"></path>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Current month" type="button" aria-label="Current month" aria-keyshortcuts="Home"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-circle-fill b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g>
                              <circle cx="10" cy="10" r="8"></circle>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Next month" type="button" aria-label="Next month" aria-keyshortcuts="PageUp"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-chevron-left b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                              <path fill-rule="evenodd"
                                d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                clip-rule="evenodd"></path>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                    <button title="Next year" type="button" aria-label="Next year" aria-keyshortcuts="Alt+PageUp"
                      class="btn btn-sm btn-outline-secondary border-0 flex-fill p-1 mx-1">
                      <div aria-hidden="true">
                        <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                          xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="b-iconstack b-icon bi">
                          <g transform="translate(0 -0.625)">
                            <g transform="translate(10 10) scale(-1 1) translate(-10 -10)">
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(-2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                              <svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                class="bi-chevron-left b-icon bi">
                                <g transform="translate(2.5 0)">
                                  <g>
                                    <path fill-rule="evenodd"
                                      d="M13.354 3.646a.5.5 0 010 .708L7.707 10l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0z"
                                      clip-rule="evenodd"></path>
                                  </g>
                                </g>
                              </svg>
                            </g>
                          </g>
                        </svg>
                      </div>
                    </button>
                  </div>
                  <div role="application" tabindex="0" data-month="2020-02" aria-roledescription="Calendar"
                    class="form-control h-auto text-center p-0 mb-0" id="__BVID__1145__calendar-grid_"
                    aria-labelledby="__BVID__1145__calendar-grid-caption_"
                    aria-describedby="__BVID__1145__calendar-grid-help_"
                    aria-activedescendant="__BVID__1145__cell-2020-02-25_">
                    <header class="text-center font-weight-bold p-1 m-0" id="__BVID__1145__calendar-grid-caption_"
                      aria-live="polite" aria-atomic="true">February 2020</header>
                    <div aria-hidden="true" class="row no-gutters border-bottom"><small title="Sunday"
                        aria-label="Sunday" class="col">Sun</small><small title="Monday" aria-label="Monday"
                        class="col">Mon</small><small title="Tuesday" aria-label="Tuesday" class="col">Tue</small><small
                        title="Wednesday" aria-label="Wednesday" class="col">Wed</small><small title="Thursday"
                        aria-label="Thursday" class="col">Thu</small><small title="Friday" aria-label="Friday"
                        class="col">Fri</small><small title="Saturday" aria-label="Saturday" class="col">Sat</small>
                    </div>
                    <div class="b-calendar-grid-body">
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-01-26" aria-hidden="true"
                          aria-label="Sunday, January 26, 2020" class="col p-0" id="__BVID__1145__cell-2020-01-26_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">26</span>
                        </div>
                        <div role="button" data-date="2020-01-27" aria-hidden="true"
                          aria-label="Monday, January 27, 2020" class="col p-0" id="__BVID__1145__cell-2020-01-27_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">27</span>
                        </div>
                        <div role="button" data-date="2020-01-28" aria-hidden="true"
                          aria-label="Tuesday, January 28, 2020" class="col p-0" id="__BVID__1145__cell-2020-01-28_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">28</span>
                        </div>
                        <div role="button" data-date="2020-01-29" aria-hidden="true"
                          aria-label="Wednesday, January 29, 2020" class="col p-0" id="__BVID__1145__cell-2020-01-29_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">29</span>
                        </div>
                        <div role="button" data-date="2020-01-30" aria-hidden="true"
                          aria-label="Thursday, January 30, 2020" class="col p-0" id="__BVID__1145__cell-2020-01-30_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">30</span>
                        </div>
                        <div role="button" data-date="2020-01-31" aria-hidden="true"
                          aria-label="Friday, January 31, 2020" class="col p-0" id="__BVID__1145__cell-2020-01-31_">
                          <span class="btn border-0 rounded-circle text-nowrap btn-outline-light text-muted">31</span>
                        </div>
                        <div role="button" data-date="2020-02-01" aria-label="Saturday, February 1, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-01_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">1</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-02" aria-label="Sunday, February 2, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-02_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">2</span>
                        </div>
                        <div role="button" data-date="2020-02-03" aria-label="Monday, February 3, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-03_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">3</span>
                        </div>
                        <div role="button" data-date="2020-02-04" aria-label="Tuesday, February 4, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-04_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">4</span>
                        </div>
                        <div role="button" data-date="2020-02-05" aria-label="Wednesday, February 5, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-05_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">5</span>
                        </div>
                        <div role="button" data-date="2020-02-06" aria-label="Thursday, February 6, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-06_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">6</span>
                        </div>
                        <div role="button" data-date="2020-02-07" aria-label="Friday, February 7, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-07_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">7</span>
                        </div>
                        <div role="button" data-date="2020-02-08" aria-label="Saturday, February 8, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-08_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">8</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-09" aria-label="Sunday, February 9, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-09_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">9</span>
                        </div>
                        <div role="button" data-date="2020-02-10" aria-label="Monday, February 10, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-10_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">10</span>
                        </div>
                        <div role="button" data-date="2020-02-11" aria-label="Tuesday, February 11, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-11_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">11</span>
                        </div>
                        <div role="button" data-date="2020-02-12" aria-label="Wednesday, February 12, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-12_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">12</span>
                        </div>
                        <div role="button" data-date="2020-02-13" aria-label="Thursday, February 13, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-13_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">13</span>
                        </div>
                        <div role="button" data-date="2020-02-14" aria-label="Friday, February 14, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-14_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">14</span>
                        </div>
                        <div role="button" data-date="2020-02-15" aria-label="Saturday, February 15, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-15_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">15</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-16" aria-label="Sunday, February 16, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-16_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">16</span>
                        </div>
                        <div role="button" data-date="2020-02-17" aria-label="Monday, February 17, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-17_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">17</span>
                        </div>
                        <div role="button" data-date="2020-02-18" aria-label="Tuesday, February 18, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-18_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">18</span>
                        </div>
                        <div role="button" data-date="2020-02-19" aria-label="Wednesday, February 19, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-19_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">19</span>
                        </div>
                        <div role="button" data-date="2020-02-20" aria-label="Thursday, February 20, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-20_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">20</span>
                        </div>
                        <div role="button" data-date="2020-02-21" aria-label="Friday, February 21, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-21_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">21</span>
                        </div>
                        <div role="button" data-date="2020-02-22" aria-label="Saturday, February 22, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-22_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">22</span>
                        </div>
                      </div>
                      <div class="row no-gutters">
                        <div role="button" data-date="2020-02-23" aria-label="Sunday, February 23, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-23_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">23</span>
                        </div>
                        <div role="button" data-date="2020-02-24" aria-label="Monday, February 24, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-24_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">24</span>
                        </div>
                        <div role="button" data-date="2020-02-25" aria-label="Tuesday, February 25, 2020 (Today)"
                          class="col p-0" id="__BVID__1145__cell-2020-02-25_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-primary font-weight-bold">25</span>
                        </div>
                        <div role="button" data-date="2020-02-26" aria-label="Wednesday, February 26, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-26_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">26</span>
                        </div>
                        <div role="button" data-date="2020-02-27" aria-label="Thursday, February 27, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-27_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">27</span>
                        </div>
                        <div role="button" data-date="2020-02-28" aria-label="Friday, February 28, 2020" class="col p-0"
                          id="__BVID__1145__cell-2020-02-28_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">28</span>
                        </div>
                        <div role="button" data-date="2020-02-29" aria-label="Saturday, February 29, 2020"
                          class="col p-0" id="__BVID__1145__cell-2020-02-29_"><span
                            class="btn border-0 rounded-circle text-nowrap btn-outline-light text-dark font-weight-bold">29</span>
                        </div>
                      </div>
                    </div>
                    <footer class="border-top small text-muted text-center bg-light"
                      id="__BVID__1145__calendar-grid-help_">
                      <div class="small">Use cursor keys to navigate calendar dates</div>
                    </footer>
                  </div>
                </div>
              </div>
            </div>
            <div class="col">
              <p>Value: <b>''</b></p>
              <p class="mb-0">Context:</p>
              <figure class="highlight">
              <pre class="small">{
  "selectedYMD": "",
  "selectedDate": null,
  "selectedFormatted": "No date selected",
  "activeYMD": "2020-02-25",
  "activeDate": "2020-02-24T16:00:00.000Z",
  "activeFormatted": "Tuesday, February 25, 2020",
  "disabled": false,
  "locale": "en-US",
  "calendarLocale": "en-US",
  "rtl": false
}</pre></figure>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">cols</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-3"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example-locales"</span>&gt;</span>Locale:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-locales"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"locale"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"locales"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"example-weekdays"</span>&gt;</span>Start weekday:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-form-select</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"example-weekdays"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"weekday"</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">"weekdays"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-form-select</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">md</span>=<span class="hljs-string">"auto"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-calendar</span>
        <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span>
        <span class="hljs-attr">v-bind</span>=<span class="hljs-string">"labels[locale] || {}"</span>
        <span class="hljs-attr">:locale</span>=<span class="hljs-string">"locale"</span>
        <span class="hljs-attr">:start-weekday</span>=<span class="hljs-string">"weekday"</span>
        @<span class="hljs-attr">context</span>=<span class="hljs-string">"onContext"</span>
      &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-calendar</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: <span class="hljs-tag">&lt;<span class="hljs-name">b</span>&gt;</span>'{{ value }}'<span class="hljs-tag">&lt;/<span class="hljs-name">b</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-0"</span>&gt;</span>Context:<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">pre</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>&gt;</span>{{ context }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">value</span>: <span class="hljs-string">''</span>,
        <span class="hljs-attr">context</span>: <span class="hljs-literal">null</span>,
        <span class="hljs-attr">locale</span>: <span class="hljs-string">'en-US'</span>,
        <span class="hljs-attr">locales</span>: [
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'en-US'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'English US (en-US)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'de'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'German (de)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'ar-EG'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Arabic Egyptian (ar-EG)'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-string">'zh'</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Chinese (zh)'</span> }
        ],
        <span class="hljs-attr">weekday</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">weekdays</span>: [
          { <span class="hljs-attr">value</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Sunday'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Monday'</span> },
          { <span class="hljs-attr">value</span>: <span class="hljs-number">6</span>, <span class="hljs-attr">text</span>: <span class="hljs-string">'Saturday'</span> }
        ],
        <span class="hljs-attr">labels</span>: {
          <span class="hljs-attr">de</span>: {
            <span class="hljs-attr">labelPrevYear</span>: <span class="hljs-string">'Vorheriges Jahr'</span>,
            <span class="hljs-attr">labelPrevMonth</span>: <span class="hljs-string">'Vorheriger Monat'</span>,
            <span class="hljs-attr">labelCurrentMonth</span>: <span class="hljs-string">'Aktueller Monat'</span>,
            <span class="hljs-attr">labelNextMonth</span>: <span class="hljs-string">'Nächster Monat'</span>,
            <span class="hljs-attr">labelNextYear</span>: <span class="hljs-string">'Nächstes Jahr'</span>,
            <span class="hljs-attr">labelToday</span>: <span class="hljs-string">'Heute'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'Ausgewähltes Datum'</span>,
            <span class="hljs-attr">labelNoDateSelected</span>: <span class="hljs-string">'Kein Datum gewählt'</span>,
            <span class="hljs-attr">labelCalendar</span>: <span class="hljs-string">'Kalender'</span>,
            <span class="hljs-attr">labelNav</span>: <span class="hljs-string">'Kalendernavigation'</span>,
            <span class="hljs-attr">labelHelp</span>: <span class="hljs-string">'Mit den Pfeiltasten durch den Kalender navigieren'</span>
          },
          <span class="hljs-string">'ar-EG'</span>: {
            <span class="hljs-attr">labelPrevYear</span>: <span class="hljs-string">'العام السابق'</span>,
            <span class="hljs-attr">labelPrevMonth</span>: <span class="hljs-string">'الشهر السابق'</span>,
            <span class="hljs-attr">labelCurrentMonth</span>: <span class="hljs-string">'الشهر الحالي'</span>,
            <span class="hljs-attr">labelNextMonth</span>: <span class="hljs-string">'الشهر المقبل'</span>,
            <span class="hljs-attr">labelNextYear</span>: <span class="hljs-string">'العام المقبل'</span>,
            <span class="hljs-attr">labelToday</span>: <span class="hljs-string">'اليوم'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'التاريخ المحدد'</span>,
            <span class="hljs-attr">labelNoDateSelected</span>: <span class="hljs-string">'لم يتم اختيار تاريخ'</span>,
            <span class="hljs-attr">labelCalendar</span>: <span class="hljs-string">'التقويم'</span>,
            <span class="hljs-attr">labelNav</span>: <span class="hljs-string">'الملاحة التقويم'</span>,
            <span class="hljs-attr">labelHelp</span>: <span class="hljs-string">'استخدم مفاتيح المؤشر للتنقل في التواريخ'</span>
          },
          <span class="hljs-attr">zh</span>: {
            <span class="hljs-attr">labelPrevYear</span>: <span class="hljs-string">'上一年'</span>,
            <span class="hljs-attr">labelPrevMonth</span>: <span class="hljs-string">'上个月'</span>,
            <span class="hljs-attr">labelCurrentMonth</span>: <span class="hljs-string">'当前月份'</span>,
            <span class="hljs-attr">labelNextMonth</span>: <span class="hljs-string">'下个月'</span>,
            <span class="hljs-attr">labelNextYear</span>: <span class="hljs-string">'明年'</span>,
            <span class="hljs-attr">labelToday</span>: <span class="hljs-string">'今天'</span>,
            <span class="hljs-attr">labelSelected</span>: <span class="hljs-string">'选定日期'</span>,
            <span class="hljs-attr">labelNoDateSelected</span>: <span class="hljs-string">'未选择日期'</span>,
            <span class="hljs-attr">labelCalendar</span>: <span class="hljs-string">'日历'</span>,
            <span class="hljs-attr">labelNav</span>: <span class="hljs-string">'日历导航'</span>,
            <span class="hljs-attr">labelHelp</span>: <span class="hljs-string">'使用光标键浏览日期'</span>
          }
        }
      }
    },
    <span class="hljs-attr">methods</span>: {
      onContext(ctx) {
        <span class="hljs-keyword">this</span>.context = ctx
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <p>目前 <code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 只支持Gregorian（<code
            translate="no" class="notranslate text-nowrap">'gregory'</code>） 日历。</p>
        <p>默认情况下，<code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code>
          通过解析的语言环境自动检测RTL和LTR。您可以通过将 <code translate="no" class="notranslate text-nowrap">direction</code> 属性设置为字符串
          <code translate="no" class="notranslate text-nowrap">rtl</code>来强制日历从右向左渲染，或者将 <code translate="no"
            class="notranslate text-nowrap">direction</code> 属性设置为 <code translate="no"
            class="notranslate text-nowrap">'ltr'</code> 来始终从左向右渲染。</p>
        <p>您可以侦听 <code translate="no" class="notranslate text-nowrap">context</code> 事件来确定日历已解析到的地区和方向。</p>
        <p>用于服务器端渲染（SSR）时使用节点。确保你使用的Node.js运行时支持 <code translate="no" class="notranslate text-nowrap">Intl</code>
          和你将要使用的语言环境。有关详细信息，请参阅 <a href="https://nodejs.org/api/intl.html" target="_blank" rel="noopener">Node <code
              translate="no" class="notranslate text-nowrap">Intl</code> 支持文档</a> 。</p>
        <h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">辅助功能<a class="anchorjs-link"
              href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
        <p><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code> 提供了许多可访问性特性，例如 <code
            translate="no" class="notranslate text-nowrap">aria-live</code> 区域、角色、aria标记、快捷键和全键盘导航，可用于大多数屏幕阅读器。</p>
        <p>键盘导航：</p>
        <ul>
          <li><kbd class="notranslate" translate="no">ArrowLeft</kbd>
            移到前一天（或RTL模式下的第二天）</li>
          <li><kbd class="notranslate" translate="no">ArrowRight</kbd> 移动到第二天（或在RTL模式下的前一天）</li>
          <li><kbd class="notranslate" translate="no">ArrowUp</kbd> 移至上周的同一天</li>
          <li><kbd class="notranslate" translate="no">ArrowDown</kbd> 移至下周的同一天</li>
          <li><kbd class="notranslate" translate="no">PageUp</kbd> 移至上个月的同一天</li>
          <li><kbd class="notranslate" translate="no">PageDown</kbd> 移至下个月的同一天</li>
          <li><kbd class="notranslate" translate="no">Alt</kbd>+<kbd class="notranslate" translate="no">PageUp</kbd>
            移至上一年的同一天和同一月</li>
          <li><kbd class="notranslate" translate="no">Alt</kbd>+<kbd class="notranslate" translate="no">PageDown</kbd>
            移至下一年的同一天和月份</li>
          <li><kbd class="notranslate" translate="no">Home</kbd> 移到今天的日期</li>
          <li><kbd class="notranslate" translate="no">End</kbd> 移动到当前选择的日期，如果没有选择的日期，则移动到今天</li>
          <li><kbd class="notranslate" translate="no">Enter</kbd> or <kbd class="notranslate" translate="no">Space</kbd>
            选择当前突出显示（重点）的日期</li>
        </ul>
        <p>一些 <code translate="no" class="notranslate text-nowrap">label-*</code> 属性在屏幕上不可见，但用于为屏幕阅读器用户标记日历中的各种元素。 例如，将
          <code translate="no" class="notranslate text-nowrap">label-today</code> 属性添加到包含今天日期的单元格：<code translate="no"
            class="notranslate text-nowrap">'January 28, 2020 (Today)'</code>，将 <code translate="no"
            class="notranslate text-nowrap">label-selected</code> 属性添加到包含选择日期 <code translate="no"
            class="notranslate text-nowrap">'January 28, 2020 (Selected date)'</code> 的单元格，以及作为 <code translate="no"
            class="notranslate text-nowrap">sr-only</code> 的文本添加到所选日期标题中。</p>
        <p>在对日期选择器进行国际化时，还必须使用适当的翻译字符串更新 <code translate="no" class="notranslate text-nowrap">label-*</code>
          属性，以便国际屏幕阅读器用户能够听到正确的提示和描述。</p>
        <p><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code>
          的功能和样式有意保持简约，以便为 <em>所有</em> 用户提供最佳的可访问性。</p>
        <h2 id="implementation-notes" class="bv-no-focus-ring"><span class="bd-content-title">实施说明<a
              class="anchorjs-link" href="#implementation-notes" aria-labelledby="implementation-notes"></a></span></h2>
        <p><code translate="no" class="notranslate text-nowrap">&lt;b-calendar&gt;</code>
          使用Bootstrap的margin、padding、border和flex实用工具类，以及button（<code translate="no"
            class="notranslate text-nowrap">btn-*</code>）类和 <code translate="no"
            class="notranslate text-nowrap">form-control</code> 类，BootstrapVue的自定义SCSS/CSS也需要适当的样式。</p>
        <p>在可访问性方面，我们选择 <em>不将</em> ARIA角色 <code translate="no"
            class="notranslate text-nowrap">grid</code>（网格）用于日历，以最小化冗余，并在各种屏幕阅读器之间提供一致性（NVDA在遇到角色 <code translate="no"
            class="notranslate text-nowrap">grid</code>（网格）时，将被关注的单元格读取为“已选择”，这可能会误导用户）。</p>
        <h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link"
              href="#see-also" aria-labelledby="see-also"></a></span></h2>
        <ul>
          <li><a href="../../../bootstrap-vue/docs/components/form-datepicker" class="font-weight-bold"><code
                translate="no" class="notranslate text-nowrap">&lt;b-form-datepicker&gt;</code> 日期选择器自定义表单输入</a></li>
        </ul>
        <h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a
              href="../../../bootstrap-vue/docs/components/calendar#component-reference" class="anchorjs-link"
              aria-labelledby="component-reference" target="_self"></a></span></h2>
        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-calendar" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-calendar&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/calendar#comp-ref-b-calendar" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-calendar" target="_self"></a></span></h3>
            <span data-v-866a22e8="" class="badge badge-success">v2.5.0+</span>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/calendar/calendar.js"
              class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-calendar-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-calendar&gt;</code> 属性 </a></li>
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-calendar-v-model"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-calendar&gt;</code> v-model </a></li>
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-calendar-slots"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-calendar&gt;</code> 插槽 </a></li>
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-calendar-events"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-calendar&gt;</code> 事件 </a></li>
        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-calendar-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/calendar#comp-ref-b-calendar-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-calendar-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__1029">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none"
                    class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="id" class="" id="__BVID__1029__row_id">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">id</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">用于在渲染的内容上设置'id'属性，并用作根据需要生成任何附加元素id的基础</td>
                </tr>
                <tr role="row" data-pk="value" class="" id="__BVID__1029__row_value">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">value</code> <span data-v-866a22e8=""
                      class="badge badge-primary">v-model</span></td>
                  <td aria-colindex="2" role="cell" class="">String or Date</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">初始选择日期值。接受' YYYY-MM-DD '字符串或' Date '对象</td>
                </tr>
                <tr role="row" data-pk="value-as-date" class="" id="__BVID__1029__row_value-as-date">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">value-as-date</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">返回v-model的“Date”对象，而不是“YYYY-MM-DD”字符串</td>
                </tr>
                <tr role="row" data-pk="disabled" class="" id="__BVID__1029__row_disabled">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">disabled</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">将日历置于非交互式禁用状态
                  </td>
                </tr>
                <tr role="row" data-pk="readonly" class="" id="__BVID__1029__row_readonly">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">readonly</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">将日历置于互动式只读状态。禁用更新v-model，但仍然允许日期导航</td>
                </tr>
                <tr role="row" data-pk="min" class="" id="__BVID__1029__row_min">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">min</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Date</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">日历将显示的最小日期</td>
                </tr>
                <tr role="row" data-pk="max" class="" id="__BVID__1029__row_max">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">max</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Date</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">日历将显示的最大日期</td>
                </tr>
                <tr role="row" data-pk="date-disabled-fn" class="" id="__BVID__1029__row_date-disabled-fn">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">date-disabled-fn</code></td>
                  <td aria-colindex="2" role="cell" class="">Function</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">
                    设置为一个函数引用，如果日期被禁用，该函数引用将返回“true”，如果日期应该被启用，则返回“false”。参见文档了解详细信息</td>
                </tr>
                <tr role="row" data-pk="start-weekday" class="" id="__BVID__1029__row_start-weekday">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">start-weekday</code></td>
                  <td aria-colindex="2" role="cell" class="">Number or String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">0</code></td>
                  <td aria-colindex="4" role="cell" class="">以星期几开始日历。星期日用“0”表示，星期一用“1”表示，星期六用“6”表示，等等。</td>
                </tr>
                <tr role="row" data-pk="locale" class="" id="__BVID__1029__row_locale">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">locale</code></td>
                  <td aria-colindex="2" role="cell" class="">String or Array</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">日历要使用的区域设置（或区域设置）。当传递一个区域设置数组时，区域设置的顺序是从最优先到最不优先</td>
                </tr>
                <tr role="row" data-pk="direction" class="" id="__BVID__1029__row_direction">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">direction</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">设置为字符串“rtl”或“ltr”，以显式强制日历以从右向左或从左向右（分别）模式渲染。默认为已解析区域设置的方向性
                  </td>
                </tr>
                <tr role="row" data-pk="selected-variant" class="" id="__BVID__1029__row_selected-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">selected-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'primary'</code></td>
                  <td aria-colindex="4" role="cell" class="">用于选定日期按钮的主题颜色变量
                  </td>
                </tr>
                <tr role="row" data-pk="today-variant" class="" id="__BVID__1029__row_today-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">today-variant</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">主题颜色变化，用于突出显示今天的日期按钮。默认的“variant”属性</td>
                </tr>
                <tr role="row" data-pk="no-highlight-today" class="" id="__BVID__1029__row_no-highlight-today">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">no-highlight-today</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">禁用在日历中突出显示今天的日期
                  </td>
                </tr>
                <tr role="row" data-pk="date-info-fn" class="" id="__BVID__1029__row_date-info-fn">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">date-info-fn</code></td>
                  <td aria-colindex="2" role="cell" class="">Function</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">设置为函数引用，该函数引用返回要应用于日期单元格的类（字符串）或类（字符串数组）。有关详细信息，请参阅文档</td>
                </tr>
                <tr role="row" data-pk="width" class="" id="__BVID__1029__row_width">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">width</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'270px'</code></td>
                  <td aria-colindex="4" role="cell" class="">日历的宽度。如果设置了`block`属性则无效</td>
                </tr>
                <tr role="row" data-pk="block" class="" id="__BVID__1029__row_block">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">block</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">使日历全宽</td>
                </tr>
                <tr role="row" data-pk="hide-header" class="" id="__BVID__1029__row_hide-header">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">hide-header</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">设置时，可视地隐藏所选日期标头</td>
                </tr>
                <tr role="row" data-pk="hidden" class="" id="__BVID__1029__row_hidden">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">hidden</code></td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">设置后，将渲染一个注释节点而不是日历小部件，同时保持Vue实例处于活动状态。主要用于实现自定义日期选择器
                  </td>
                </tr>
                <tr role="row" data-pk="aria-controls" class="" id="__BVID__1029__row_aria-controls">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">aria-controls</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">如果日历控制另一个组件/元素，则将此道具设置为日历控制的元素的ID</td>
                </tr>
                <tr role="row" data-pk="role-description" class="" id="__BVID__1029__row_role-description">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">role-description</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">为组件上的“role-description”属性设置一个值</td>
                </tr>
                <tr role="row" data-pk="label-prev-year" class="" id="__BVID__1029__row_label-prev-year">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-prev-year</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Previous year'</code></td>
                  <td aria-colindex="4" role="cell" class="">'上一年'导航按钮上的' aria-label '和' title '属性的值</td>
                </tr>
                <tr role="row" data-pk="label-prev-month" class="" id="__BVID__1029__row_label-prev-month">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-prev-month</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Previous month'</code></td>
                  <td aria-colindex="4" role="cell" class="">“前一个月”导航按钮上的“aria-label”和“title”属性的值</td>
                </tr>
                <tr role="row" data-pk="label-current-month" class="" id="__BVID__1029__row_label-current-month">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-current-month</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Current month'</code></td>
                  <td aria-colindex="4" role="cell" class="">“当前月份”导航按钮上的“aria-label”和“title”属性的值</td>
                </tr>
                <tr role="row" data-pk="label-next-month" class="" id="__BVID__1029__row_label-next-month">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-next-month</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Next month'</code></td>
                  <td aria-colindex="4" role="cell" class="">“下个月”导航按钮上的“aria-label”和“title”属性的值</td>
                </tr>
                <tr role="row" data-pk="label-next-year" class="" id="__BVID__1029__row_label-next-year">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-next-year</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Next year'</code></td>
                  <td aria-colindex="4" role="cell" class="">' 下一年 '导航按钮上' aria-label '和' title '属性的值。</td>
                </tr>
                <tr role="row" data-pk="label-today" class="" id="__BVID__1029__row_label-today">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-today</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Today'</code></td>
                  <td aria-colindex="4" role="cell" class="">日历网格日期按钮的' aria-label '属性的值，表示日期是今天的日期</td>
                </tr>
                <tr role="row" data-pk="label-selected" class="" id="__BVID__1029__row_label-selected">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-selected</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Selected date'</code></td>
                  <td aria-colindex="4" role="cell" class="">在选中的日历网格日期按钮上设置的' aria-label '属性的值</td>
                </tr>
                <tr role="row" data-pk="label-no-date-selected" class="" id="__BVID__1029__row_label-no-date-selected">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-no-date-selected</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'No date selected'</code></td>
                  <td aria-colindex="4" role="cell" class="">当前没有选择日期时要使用的标签</td>
                </tr>
                <tr role="row" data-pk="label-calendar" class="" id="__BVID__1029__row_label-calendar">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-calendar</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Calendar'</code></td>
                  <td aria-colindex="4" role="cell" class="">' aria-label '和' role-description '属性应用于日历网格的值</td>
                </tr>
                <tr role="row" data-pk="label-nav" class="" id="__BVID__1029__row_label-nav">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-nav</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Calendar navigation'</code></td>
                  <td aria-colindex="4" role="cell" class="">日历导航按钮包装上的' aria-label '属性的值</td>
                </tr>
                <tr role="row" data-pk="label-help" class="" id="__BVID__1029__row_label-help">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">label-help</code></td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Use cursor keys to navigate calendar dates'</code></td>
                  <td aria-colindex="4" role="cell" class="">帮助文本显示在日历网格的底部
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-calendar-v-model" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> v-model <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/calendar#comp-ref-b-calendar-v-model" class="anchorjs-link"
                aria-labelledby="comp-ref-b-calendar-v-model" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped"
              id="__BVID__1071">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">事件</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="notranslate">value</code></td>
                  <td aria-colindex="2" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="notranslate">input</code></td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-calendar-slots" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 插槽 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/calendar#comp-ref-b-calendar-slots" class="anchorjs-link"
                aria-labelledby="comp-ref-b-calendar-slots" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="2" class="table b-table bv-docs-table table-striped"
              id="__BVID__1080">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">插槽名</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">描述</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="default" class="" id="__BVID__1080__row_default">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">default</code></td>
                  <td aria-colindex="2" role="cell" class="">用于将自定义控件放置在日历组件的底部</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-calendar-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/calendar#comp-ref-b-calendar-events" class="anchorjs-link"
                aria-labelledby="comp-ref-b-calendar-events" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped"
              id="__BVID__1089">
              <thead role="rowgroup" class="">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" data-pk="input" class="" id="__BVID__1089__row_input">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="notranslate">input</code></td>
                  <td aria-colindex="2" role="cell" class="">
                    <ol data-v-866a22e8="" class="list-unstyled mb-0">
                      <li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
                          class="notranslate">date</code> - <span
                          data-v-866a22e8="">格式为YYYY-MM-DD的字符串或日期对象（如果value-as-date属性为true）。</span></li>
                    </ol>
                  </td>
                  <td aria-colindex="3" role="cell" class="">在更新 v-model 时发出</td>
                </tr>
                <tr role="row" data-pk="selected" class="" id="__BVID__1089__row_selected">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="notranslate">selected</code></td>
                  <td aria-colindex="2" role="cell" class="">
                    <ol data-v-866a22e8="" class="list-unstyled mb-0">
                      <li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
                          class="notranslate">ymd</code> - <span data-v-866a22e8="">所选日期为字符串，格式为' YYYY-MM-DD '</span>
                      </li>
                      <li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
                          class="notranslate">date</code> - <span data-v-866a22e8="">选择的日期作为“date”对象</span></li>
                    </ol>
                  </td>
                  <td aria-colindex="3" role="cell" class="">当用户选择(单击)日期时发出。注意，如果用户单击当前选择的日期，也会发出此事件</td>
                </tr>
                <tr role="row" data-pk="context" class="" id="__BVID__1089__row_context">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="notranslate">context</code></td>
                  <td aria-colindex="2" role="cell" class="">
                    <ol data-v-866a22e8="" class="list-unstyled mb-0">
                      <li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
                          class="notranslate">context</code> - <span data-v-866a22e8="">上下文对象。 有关详细信息，请参见文档</span></li>
                    </ol>
                  </td>
                  <td aria-colindex="3" role="cell" class="">当用户通过日期导航按钮或光标控件更改活动日期时发出</td>
                </tr>
              </tbody>
            </table>
          </div>
        </article>
        <article class="bd-content">
          <h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span
              class="bd-content-title"> 导入单个组件 <a
                href="../../../bootstrap-vue/docs/components/calendar#importing-individual-components"
                class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
          <p> 您可以通过以下指定的导出将各个组件导入到您的项目中： </p>
          <div class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped"
              id="__BVID__1102">
              <thead role="rowgroup" class="thead-default">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-calendar&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BCalendar</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p><strong>示例：</strong></p>
          <figure class="highlight">
          <pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BCalendar } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-calendar'</span>, BCalendar)</pre></figure>
        </article>
        <article class="bd-content">
          <h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">
              作为Vue.js插件导入 <a href="../../../bootstrap-vue/docs/components/calendar#importing-as-a-plugin"
                class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
          <p> 这个插件包含了上面列出的所有组件。插件还包括任何组件别名。 </p>
          <div class="table-responsive-sm">
            <table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2"
              class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__1112">
              <thead role="rowgroup" class="thead-default">
                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
                </tr>
              </thead>
              <tbody role="rowgroup">
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">CalendarPlugin</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
              </tbody>
            </table>
          </div>
          <p><strong>示例：</strong></p>
          <figure class="highlight">
          <pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { CalendarPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(CalendarPlugin)</pre></figure>
        </article>
























      </main>
    </div>
  </div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
  <script src="../../../v4/dist/js/popper.min.js"></script>
  <script src="../../../v4/dist/js/bootstrap.min.js"></script>
  <script src="../../../v4/assets/js/docs.min.js"></script>
  <script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script>
  <script src="../../../v4/assets/js/docsearch.min.js"></script>
  <script>
    docsearch({
      appId: 'PRR89ISST8',
      apiKey: '95044d57d4d7bb744f322d1f18ed607f',
      indexName: 'z01-bootstrapV4',
      inputSelector: '#search-input',
      handleSelected: function (input, event, suggestion) {
        var url = suggestion.url;
        url = suggestion.isLvl1 ? url.split('#')[0] : url;
        // If it's a title we remove the anchor so it does not jump.
        window.location.href = url;
      },
      transformData: function (hits) {
        return hits.map(function (hit) {
          hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
          return hit;
        });
      },
      debug: false // Set debug to true if you want to inspect the dropdown
    });
  </script>
  <script>
    Holder.addTheme('gray', {
      bg: '#777',
      fg: 'rgba(255,255,255,.75)',
      font: 'Helvetica',
      fontweight: 'normal'
    });
  </script>
</body>

</html>